flex-grow

The flex-grow CSS property sets the flex grow factor of a flex item main size.

Syntax

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

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

The flex-grow property is specified as a single <number>.

Values

<number>
See <number>. Negative values are invalid. Defaults to 0.

Description

This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

The main size is either width or height of the item which is dependent on the flex-direction value.

The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.

flex-grow is used alongside the other flex properties flex-shrink and flex-basis, and normally defined using the flex shorthand to ensure all values are set.

Formal definition

Initial value0
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Computed valueas specified
Animation typea number

Formal syntax

<number>

Examples

Setting flex item grow factor

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 {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  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

Specifications

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
flex-growChrome Full support 29
Full support 29
Full support 22
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 20
Notes
Full support 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
No support 18 — 20
Disabled
Disabled From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 10
Alternate Name
Alternate Name Uses the non-standard name: -ms-flex-positive
Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 20
Notes
Full support 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
No support 18 — 20
Disabled
Disabled From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9
Full support 9
Full support 7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 2.0
Full support 2.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
<0 animate
Non-standard
Chrome Full support 49Edge Full support 79Firefox Full support 32
Notes
Full support 32
Notes
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
IE No support NoOpera Full support 36Safari No support NoWebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 32
Notes
Full support 32
Notes
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Opera Android Full support 36Safari iOS No support NoSamsung Internet Android Full support 5.0

Legend

Full support
Full support
No support
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also