CSS `flex-grow` Property

Example

Make the second element three times as wide as the others:

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

The numbers in the table specify the first browser version that fully supports the property.

Numbers following -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
flex-grow	29.0 <br>21.0 -webkit-	11.0 <br>10.0 -ms-	28.0 <br>18.0 -moz-	9.0 <br>6.1 -webkit-	17.0

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible box item, the flex-grow property has no effect.

Value	Description
number	A number specifying how much the item will grow relative to the rest. Default is 0.
initial	Sets this property to its default value. See initial
inherit	Inherits this property from its parent element. See inherit

CSS Reference Manual: flex Property

CSS Reference Manual: flex-basis Property

CSS Reference Manual: flex-flow Property

CSS Reference Manual: flex-shrink Property

CSS Reference Manual: flex-wrap Property