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.
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.