W3cubDocs

/CSS

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 value 0
Applies to flex items, including in-flow pseudo-elements
Inherited no
Computed value as specified
Animation type a 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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
flex-grow 29
29
22
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
12
12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
20
20
Since Firefox 28, multi-line flexbox is supported.
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.
11
11
10
Uses the non-standard name: -ms-flex-positive
12.1
12.1
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9
9
6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
<0 animate 49 79 32
32
Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
No 36 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
flex-grow 4.4
4.4
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
29
29
25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
20
20
Since Firefox 28, multi-line flexbox is supported.
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.
12.1
12.1
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9
9
7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
2.0
2.0
1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
<0 animate 49 49 32
32
Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
36 No 5.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow