🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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+