CSS flex-shrink – shrink flex item if needed

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

SpecificationStatusCategories
Flexible Box Layout ModuleW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments