Flex Grow

Another property that can be applied on a flex item is the Flex Grow property. This property specifies what amount of space inside the flex container the item should take up if necessary.

The Flex grow factor is always relative to the size of other items in the flex container.

Flex Grow

By default, you can see that the flex item only takes up space that is required to fit the content. so there is extra space within the container.

sometimes we don’t want the additional white space instead we want the flex items to grow to utilize the remaining space.
By default all flex items have a flex grow the value of 0. So lets set it for one of the items and see what happens.

...
.item-3 {
    background-color: #1C4C56;
    flex-grow: 1;
}
...

We have set the flex-grow: 1 to 3^rd item so the third item will utilize the extra whitespace.

Flex Grow With Extra Space

If we add similar flex-grow value then space will equally be distributed with two items containing the flex-grow property.
We can also give different space for the items containing the property just by increasing the integer value.

...
.item-6 {
    ...
    flex-grow: 1;
}
.item-7 {
    ...
    flex-grow: 3;
}
...

now the item-7 is taking 3x extra space as much as item-6.

Demo

See the Pen
Flex Grow by rehmaanali (@geekstrick)
on CodePen.

Conclusion

So the property dictates what amount of the available space inside the flex container the items should take up.
Flex grow factor is also relative to the other items in the container. by default value is 0 which dictates the items should not grow.
Setting a value of 1 on all the flex items will cause the flex item to grow even when there is additional space in the container.

.
.