CSS - flex-shrink

The flex-shrink CSS property specifies the flex shrink factor of a flex item.

Example

HTML

<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-shrink:1 . D and E are flex-grow:1 .</h5>
<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 class="box" style="background-color:brown;">F</div>
</div>

CSS

#content {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.box { 
flex-shrink: 1; 
border: 3px solid rgba(0,0,0,.2);
}

.box1 { 
flex-grow: 1; 
border: 3px solid rgba(0,0,0,.2);
}

Result

Syntax  

flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

Values

<number>
See <number>. Negative values are invalid.

Formal syntax

<number>

Description  

The flex-shrink CSS property specifies the flex shrink factor of a flex item.

Initial value1
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typea number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.

Browser Compatibility  

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1]
32.0 (32.0)[2]
21.0-webkit 10[3] 12.10 8.0-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 18.0 (18.0)[1]
32.0 (32.0)[2]
? 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.

See Also  

Specifications  

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-shrink' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/flex-shrink