flex-grow
Last Updated: March 29, 2022
Sometimes you may need to fill the additional space of the container with flex items. You can do that with flex-grow
property.
So basically this value tells how much a flex item should grow.
The value which you specify here is a unitless value and it works as a proportion to grow inside the container.
Grow 2nd item by 2
div:nth-child(3){
flex-grow:2
}
1
2
3
4
5
Grow 1st item by 2 and 2nd item by 3
div:nth-child(1){
flex-grow:2
}
div:nth-child(2){
flex-grow:3
}
1
2
3
4
5