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
Test