What is flex

flex-grow

Defines flex growth factor.

Growth factor specifies how much of the flex container's positive free space (if any) should be assigned to the flex item's main size.

flex-grow value is a ratio.

• If flex-grow is applied evenly to container items equally to any other value greater than 0 will produce the same result.

Illustration

Flex container is 700px main size.

There are four items in the container with 100px in main size with flex-grow factor of 0, 1, 2, 3 respectively.

There remains 300px of positive free space to be distributed.

The sum of the four grow factors 0 + 1 + 2 + 3 is equal to 6.

• 300px / 6 = 50px
• Therefore, each grow factor is equal to 50px.

flex-grow: 0; // default; prevents item from growing => 100px (original main size)
flex-grow: 1; // value is a ratio, +50px => 150px
flex-grow: 2; // +100px => 200px
flex-grow: 3; // +150px => 250px

Free Space

Positive free space

• When we say a flex container has a positive free space,it means the container has more space than required to display the flex items inside the container.
• e.g. 500px-wide container, flex-direction set to row and containing three 100px-wide flex items has 200px of positive free space.

Negative free space

• A flex container has negative free space when the combined value of the natural sizes of the flex items is larger than the available space in the flex container.

Main Size

The main axis is the axis running in the direction the flex items are laid out in (col or row).

• Main axis is the entire length of the flex container in the direction it grows in.

The start and end of this axis are called the main start and main end.

The length from the main-start edge to the main-end edge is the main size.