The item growth factor, flex-grow

We didn’t tell you about something in the previous assignment. In fact, the basic size is not just the size of the item along the main axis. Rather, it is the initial or original size along this axis.

Why are these initial or original sizes so important?

Again, we should state that it all depends on the mechanism that is used to redistribute free space in the flexbox.

If there is still free space inside the flex container along the main axis, we can ask the flex item to increase in size in order to occupy this space. We can do this using the flex-grow property, which we can term the “flex-greed factor” of the flex item.

The flex-grow property accepts non-negative integer values, and its default value is 0.

If the value of flex-grow is equal to zero, then the flex item will not try to occupy the remaining free space in the flex container, meaning that it will not increase in size.

If the flex-grow value is greater than zero, then the flex item will increase in size in order to take over any remaining free space.

It turns out the basic size is the same as the original size of the flex items before flex-grow is applied.