CSS - flex-grow

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up.

Example

HTML

<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<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 class="box" style="background-color:brown;">F</div>
</div>

CSS

#content {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0,0,0,.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0,0,0,.2);
}

Result

Syntax  

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

Values

<number>
See <number>. Negative values are invalid.

Formal syntax

<number>

Description  

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up.

Initial value0
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableyes, as a number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.

Browser Compatibility  

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1] 21.0-webkit 11 12.10 6.1-webkit
< 0 animate 32.0 (32.0)[2] 49.0 ? No support No support
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 18.0 (18.0)[1] ? No support 12.10 No support
< 0 animate 32.0 (32.0)[2] ? ? No support No support

[1] Firefox supports only single-line flexbox until Firefox 27. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] Before Firefox 32, Gecko wasn't able to animate values starting or stopping at 0(SpecDemo).

See Also  

Specifications  

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-grow' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/flex-grow