flex-grow:

1
2
3
4


<div class="container">
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</div>

.flex-item1{
  flex-grow: 01;}
.flex-item2{
  flex-grow: 012;}
.flex-item3{
  flex-grow: 013;}
.flex-item4{
  flex-grow: 01;}

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Back