CSS flex-grow – grow flex item if needed

CSS flex-grow property lets a flex item to grow if needed. Its initial value is 0. That mean by default flex item does not grow. It can take any positive value. All flex items grow in proportion of their flex-grow value.

Syntax:

.someflexcontainer {
  display: flex;
}
.flexitem {
  flex-grow: 1;
}

CSS property flex-grow

CSS version: CSS 3
Value: number
Initial: 0
Applies to: flex items
Inherited: no

Example – flex-grow

In the following code, CSS property flex-grow can be changed to the following values
  • 0
  • 1
<style>
.fbox {
  display: flex;
  width: 250px; background-color:gray;
}
.child {
  background-color:green;
  padding: 3px; margin: 3px;
  flex-grow: 0;
}
</style>

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
flex-grow 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