flex-shrink property

Specifies the flex shrink factor for the flex item.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name flex-shrink, which is preferred for better standards compliance and future compatibility.

This property is read/write.

IE11

Syntax

flex-shrink: <number>

Property values

To control how the flex item shrinks relative to other items in the flex container, use the following.

<number>

A positive number that determines the flex shrink factor of the flex item. Negative numbers are invalid.

CSS information

Applies Toflex items
Mediavisual
Inheritedno
Initial Value1

Remarks

The flex shrink factor is a multiplier that determines how much a flex item shrinks relative to the other items in the flex container.

This property can also be specified within the shorthand flex property.

Examples

In the following example, flex-shrink values are defined for three flex items inside of the flex container.


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

The image below shows the above flex container that has been resized smaller than the original size of the flex container. The image shows how each flex item will shrink relative to each other. When flex-shrink is set to a higher value, the flex item will shrink more relative to the other items inside of the flex container. The first flex item has a flex-shrink value of 20. This flex item will shrink more relative to the two other flex items whose values are 5 and 1, the initial value for flex-shrink.

A flex container resized smaller than the original size


#item1 {
   width: 120px;
   background: #66CC33;
   flex-shrink: 20;
}
#item2 {
   width: 120px;
   background: #0099FF;
   flex-shrink: 5;
}
#item3 {
   width: 120px;
   background: #66CC33;
}


Requirements

See also

CSSStyleDeclaration
Flexible box layout (Windows)
flex

 

 

Show:
© 2014 Microsoft