The flex-shrink
CSS property sets the flex shrink factor of a flex item. If the size of flex items is larger than the flex container, items shrink to fit according to flex-shrink
.
/* <number> values */ flex-shrink: 2; flex-shrink: 0.6; /* Global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset;
The flex-shrink
property is specified as a single <number>
.
<number>
<number>
. Negative values are invalid.<number>
<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>
#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; }
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-shrink' in that specification. | Candidate Recommendation | Initial definition |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 29
|
12
|
20
|
10
|
12.1
|
8
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 4.4
|
29
|
Yes
|
20
|
12.1
|
? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink