flex-grow

Avatar of Chris Coyier
Chris Coyier on (Updated on )

The flex-grow property is a sub-property of the Flexible Box Layout module.

It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

.element {
  flex-grow: 2;
}

For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.

Syntax

flex-grow: <number>

Demo

The following demo shows how the remaining space is being calculated according to the different values of flex-grow (see on CodePen for better understanding).

All items have a flex-grow value of 1 except the 3rd one which has a flex-grow value of 2. It means when the available space is distributed, the 3rd flex-item will have twice as much space as others.

Browser support

IEEdgeFirefoxChromeSafariOpera
10 1
11
All20+22-28 2
29+
7-8 2
9+
12.1+
iOSChrome AndroidFirefox AndroidAndroidOpera Mobile
7-8.4 2
9+
22-28 2
29+
90+92+12.1+
Source: caniuse
  • 1 Uses the non-standard name -ms-flex-positive
  • 2 Supported with prefix -webkit-

Blackberry browser 10+ supports the new syntax.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” or this article from DevOpera.

More information