Check for remaining flex line space in the main direction

Let’s see if there’s still some room left in each flex line

By default, flex items don’t grow to fill their flex lines along the main axis.

So there’s a good chance there’s some room left in each flex line.

If there’s still some room, the flex items will get a chance to grow their auto margins.

Note that this won’t grow the visible part of a flex item, just its margin. But according to the box model, the margin area belongs to the box just as much as the border, padding, and content areas. So technically we will be growing the margin box, or the “outer size” of the flex item.

If there aren’t any auto margins, then all the space will be distributed according the value of justify-content on the flex container.

First, grab the length of the flex line

Flex lines always have the same length as the size of the flex container in the main axis. For example, if your flex container has a fixed size of 500px, then that’s the lenght of the flex line.

Check the chapter on collecting flex items into flex lines for details on where this size comes from.

Subtract the size of each flex item’s margin box.

This is the “outer size” of the flex item, which is the main size we calculated before, plus any padding, border, and margin that each flex item might have.

auto margins will get a chance to claim the remaining flex line space later. But for the sake of this calculation, we treat them as though they were zero.

Subtract the reserved space for gaps between flex items.

If the flex container set a gap to be inserted between flex items, then that space is already claimed by those gaps.

If you have two flex items, there’s one gap. If we have three flex items, that’s two gaps. And so on.

Subtracting these two things from the flex line length gives you the remaining flex line space.

Note that your flex items might be overflowing the flex container already.

For example, if the flex items refuse to shrink.

In that case, this remaining space might be below zero.

Of course, this means there’s no more room for the flex items auto margins to claim.

And there’s no space for justify-content to distribute.

However, the flex items can still be aligned, for example to the center of the flex line. In this case they will overflow the flex line on both sides.