Align and distribute flex lines in the cross direction with
This works the same as
Instead of the flex container’s main size, we take the flex container’s cross size.
Instead of moving flex item margin boxes inside a flex line, we move the flex lines inside a flex container.
If normal or stretch, then the flex lines were already stretched before.
And nothing happens in this step anymore.
How this works
Take the remaining space calculated in the previous chapter.
Check the value of .
If it’s an alignment value, use the “magnets method” to align the flex lines within the flex container.
If it’s a distribution value, then split the remaining space according to that value.
If there’s no remaining space, distribution values have fallback alignment values.
For example, space-around falls back on `center.
Gaps are always inserted between flex lines.
If the flex container declared a gap between flex lines, then it’s always inserted.
These gaps are added to spaces distributed by the distribution properties. So you might up with larger spaces between the flex lines than you would expect.