CSS flex-grow property

Definition and Usage

The flex-grow property specifies the growth amount of the item relative to the other flexible items in the same container.

Note:The flex property is invalid if the element is not a flexible item.

See also:

CSS Tutorial: CSS Flexible Box

CSS Reference Manual:flex Property

CSS Reference Manual:flex-basis Property

CSS Reference Manual:flex-direction Property

CSS Reference Manual:flex-flow Property

CSS Reference Manual:flex-shrink Property

CSS Reference Manual:flex-wrap Property

HTML DOM Reference Manual:flexGrow Property

Example

Make the width of the second flexible item three times the width of the other flexible items:

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

Try it yourself

CSS Syntax

flex-grow: number|initial|inherit;

Property Value

Value Description
number A numeric value that specifies the growth amount of this item relative to the other flexible items. The default is 0.
initial Set this property to its default value. See also initial.
inherit Inherit this property from its parent element. See also inherit.

Technical Details

Default Value: 0
Inheritance: No
Animation Production: Support. See also:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.flexGrow="5"

Browser Support

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

The numbers in the table indicate the first browser version that fully supports this property before using the prefix specified by -webkit-, -ms-, or -moz-.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0