Resolve flex item main sizes

Congrats, you’ve made it to the heart of Flexbox Land

The flex container set the stage, offering a certain amount of space to flex items. And it set the flex-direction, which determines the main direction.

Each flex item specified its flex base size.

Flex items have been collected into one or more flex lines according in the right order.

Flex items grow and shrink in each flex line separately

You could have one flex line with plenty of remaining space, and you’ll let the flex items grow.

And you could have another flex line which has no remaining space, and you’ll ask the flex item to shrink.

These things will happen completely separately.

The rough steps of resolving the flexible size of flex items

Check if there’s any remaining space in a flex line.

If there’s space left, give the flex items the chance to grow.

If the flex items are overflow a flex line, ask them to shrink.

How to check if there’s remaining space

Add up the margin box sizes of all the flex items. That’s the same size you used when collecting flex items into flex lines in a previous chapter. If a flex item has an auto margin, treat that as 0 for now.

Add up the space taken by the gaps inserted by the flex container.

Subtract these two from the length of the flex line.

By default, flex items don’t grow

By default, the value of flex-grow is "0", which means the flex items "don’t want to" grow.

By default, flex items shrink

The initial value of flex-shrink is 1, which means the flex items agree to shrink and that they all shrink at the same rate (because they all have the same factor of flex-shrink)

Flex items grow and shrink from their flex base size.

You could have three flex items that all want to grow at the same rate.

But if they all asked for a different flex base size, they will end up with different sizes even if you add the same amount of growth to each.

If you want to make sure all flex items end up with the exact same size, make sure they start from the same flex base size.

Flex items will stop shrinking when they reach their minimum size.

The minimum size is set by whichever sizing property corresponds to the main axis. For example, in English for a row flex container the main axis is horizontal, so the corresponding property would be min-inline-size.

The initial value of minimum size properties like min-inline-size is auto. This means different things depending on the type of layout being used.

In Flexbox layout, this auto min size is derived from the size of the content inside a flex item.

Flex items will stop growing when they reach their maximum size.

Just like with the minimum size property, you can specify a maximum size property to limit how big your flex items can get.

The initial value of maximum size properties is none. This means that unless you set a different value, the flex items will not stop growing.

You can make your flex items inflexible and prevent any growing or shrinking

You can do this by making sure flex-grow: 0 and flex-shrink: 0 are set.

The flex shorthand property.

Instead of separately setting flex-grow, flex-shrink, and flex-basis, you can set all three properties at once with the flex shorthand.

For example, flex: 0 1 auto sets flex-grow: 0, flex-shrink: 1, and flex-basis: auto. Which are all initial values of these properties.

flex “shortcuts”

You can say things like flex: none, which is the same as setting flex: 0 0 auto. This is useful when you want to make a flex item inflexible.

Or, you can set flex: 1, which sets flex: 1 1 0. This is useful when you want to make sure all flex items

How the growing and shrinking works in detail