Remember, the main direction is set by the value of on the flex container.
So in English, when you have a : row flex container, `justify-content will be aligning and distributing flex items horizontally.
At this point, flex items and flex lines have been sized, including any stretching.
And, after flex items auto margins got a chance to claim remaining space first.
By default, the flex items are aligned flush with the main-start side of the flex container
All flex items are smushed together.
Then the gaps are inserted between flex items, if the flex container asked for any.
Then that entire group is placed flush with the main-start edge of the flex container.
If you have a : row flex container and you’re writing in English, then that’s the left side of the flex container’s box.
If you have a : row-reverse flex container and you’re writing in English, then that’s the right side of the flex container’s box.
Figuring out if there’s any remaining space on a flex line
Sum up the margin box sizes of all the flex items on a particular flex line.
Add to it the sum of the gaps inserted between the flex items.
Remember that if any of the flex items had margin: auto, then the margin boxes of those flex items would’ve grown by now to fill the entire flex line. So there won’t be any remaining space for to distribute.
Even if there’s no remaining space, the alignment values are still applied.
Distribution values like space-between need remaining space to distribute. If there’s no remaining space, they each have a fallback alignment they’ll apply.
For example, space-evenly will center all the flex items just like : center.
If the flex container is multi-line,
By default, you’ll have a single-line flex container because it has : nowrap. In that case the flex container has a single line the size of the flex container. And the alignment and distribution happens in that line.
If you have : wrap or : wrap-reverse, and you do have multiple flex lines, then this alignment will be applied to each flex line separately.