CSS flex-grow Property

Let the second flex-item grow three times wider than the rest:

/* Safari 6.1+ */
div:nth-of-type(1) {-webkit-flex-grow: 1;}
div:nth-of-type(2) {-webkit-flex-grow: 3;}
div:nth-of-type(3) {-webkit-flex-grow: 1;}/* Standard syntax */
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 »


Definition and Usage

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 item, the flex-grow property has no effect.

Default value: 0
Inherited: no
Animatable: yes. Read about animatable – Try it
Version: CSS3
JavaScript syntax: object.style.flexGrow=”5″ Try it
CSS Syntax
flex-grow: number|initial|inherit;
Property Values
Value Description
number A number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit