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;
<div class="grid"> <div class="row"> <div class="cell">flex-shrink: <div class="container"> <div class="item small"><strong>0.5</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div> <div class="item mid"><strong>1</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div> <div class="item large"><strong>3</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: left; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: 1; white-space: nowrap; } .container { background: #E4F0F5; margin-top: .5em; display: flex; } .item { border: 1px solid black; padding: 1em; } .small { flex-shrink: 0.5; } .mid { flex-shrink: 1; } .large { flex-shrink: 3; }
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 |
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 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 21 -webkit- | Yes Yes -webkit- | 49 -webkit- 18 — 204 | 105 | 12.1 15 -webkit- | 8 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes Yes -webkit- | 49 -webkit- 18 — 204 | No | 12.1 15 -webkit- | ? |
1. Since Firefox 28, multi-line flexbox is supported.
2. Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0
.
3. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
4. From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
5. 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
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis