HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python 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:
/* 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.
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified 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
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
