W3cubDocs

/CSS

flex-grow

The flex-grow CSS property sets how much of the available space in the flex container should be assigned to that item (the flex grow factor). If all sibling items have the same flex grow factor, then all items will receive the same share of available space, otherwise it is distributed according to the ratio defined by the different flex grow factors.

In use, 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.

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.

Formal syntax

<number>

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 {
  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

Initial value	`0`
Applies to	flex items, including in-flow pseudo-elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	a number
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	29 29 21 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-	6.1 Prefixed 6.1 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
<0 animate	49	?	32 32 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	?	No	No

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	4.4 4.4 Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	29 29 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Yes Yes Yes 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 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	?	?
<0 animate	?	?	?	32 32 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	No	No	?