The flex-shrink
CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink
number, when the default width of flex items is wider than the flex container.
flex-shrink: 2; flex-shrink: 0.6; /* Global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset;
Initial value | 1 |
---|---|
Applies to | flex items, including in-flow pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | a number |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
See Using CSS flexible boxes for more properties and information.
Syntax
The flex-shrink
property is specified as a single <number>
.
Values
Formal syntax
<number>
Example
HTML
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p> <p>The width of D and E is less than the others.</p> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> </div>
CSS
#content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-shrink' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 18.0 (18.0)[1] 32.0 (32.0)[2] |
21.0-webkit | (Yes)-webkit (Yes) |
10[3] | 12.10 | 8.0-webkit |
Feature | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 18.0 (18.0)[1] 32.0 (32.0)[2] |
? | (Yes)-webkit (Yes) |
No support | 12.10 | No support |
[1] Firefox supports only single-line flexbox until Firefox 27. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config
preference layout.css.flexbox.enabled
to true
.
In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
[2] Before Firefox 32, Gecko wasn't able to animate values starting or stopping at 0(Spec, Demo)
.
[3] Internet Explorer 10 uses 0
instead of 1
as the initial value for the flex-shrink
property. A workaround is to always set an explicit value for flex-shrink
. See Flexbug #6 for more info.