It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Flex-Grow Property

Reading time 2 min
Published Aug 8, 2017
Updated Oct 1, 2019

The CSS grow factor for flex

The CSS flex-grow property specifies how the size of a flex item will increase if there is any free space available in the flex container:

Example
/* Safari 6.1 and newer */

a:nth-of-type(1) {-webkit-flex-grow: 1;}
a:nth-of-type(2) {-webkit-flex-grow: 3;}
a:nth-of-type(3) {-webkit-flex-grow: 1;}
a:nth-of-type(4) {-webkit-flex-grow: 1;}
a:nth-of-type(5) {-webkit-flex-grow: 1;}
/* Standard syntax */
a:nth-of-type(4) {flex-grow: 2;}  
a:nth-of-type(5) {flex-grow: 5;}  
a:nth-of-type(6) {flex-grow: 8;}

This property works in an opposite manner of flex-shrink. You can use them together easier by applying the CSS flex shorthand.

How to use CSS flex-grow

To use this property, you only need to define one value:

flex-grow: value;

The default value for flex-grow is 0, which means the flex item will not grow at all. You can define a custom value in a unitless number which will represent the ratio of the available space.

If all flex items have the same flex-grow values, the free space is divided equally among them. If the values differ, the space is shared accordingly.

Imagine we have three items in the same flex container. See what their flex-grow values specify:
First item flex-grow: 1; Takes up 1/6 of the free space
Second item flex-grow: 3; Takes up 3/6 (half) of the free space
Third item flex-grow: 2; Takes up 2/6 (a third) of the free space

Note: keep in mind that even if you distribute the free space equally, the items will not end up all the same size if they weren't the same size to begin with.

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
20+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
20+
Browser image
Opera
12.1+
Browser image
Safari
9+