New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#flex-grow
Defines how much a flexbox item should grow if there's space available.
default
flex-grow: 0;
The element will not grow if there's space available. It will only use the space it needs.
flex-grow: 1;
The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow
value.
flex-grow: 2;
Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.
In this example, the remaining space is divided in 3:
- 1 third goes to the green item
- 2 thirds go to the pink item
- Nothing goes to the yellow item, who retains its initial width