CSS flex-shrink property lets a flex item to shrink if needed. Its initial value is 1. That mean by default flex items will shrink. It can take any positive value. All flex items shrink in proportion of their flex-shrink value.
Syntax:
.someflexcontainer {
display: flex;
}
.flexitem {
flex-shrink: 1;
}CSS property flex-shrink
| CSS version: | CSS 3 |
| Value: | number |
| Initial: | 1 |
| Applies to: | flex items |
| Inherited: | no |
Example – flex-shrink
In the following code, CSS property flex-shrink can be changed to the following values
- 1
- 0
<style>
.fbox {
display: flex;
width: 250px; background-color:gray;
}
.child {
background-color:green;
padding: 3px; margin: 3px;
width: 100px;
flex-shrink: 1;
}
</style>
<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>flex-shrink refresh
Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| Flexible Box Layout Module | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 29+ | Yes 28+ | Partial 11+ | Yes 12+ | Yes 9+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 9.0-9.2+ | Yes 11+ | Yes 12.1+ |
source: caniuse.com
