You saw : stretch applied to flex lines in the previous chapter. This was done during the Sizing phase of Flexbox layout, because if you stretch flex lines and then you stretch flex items, you’re changing the size of the flex items.
In the Alignment phase, the other values of are applied if you have a multi-line flex container. If you have a single-line flex container (the default : nowrap situation), then the single flex line is the exact same size as the flex container, so there’s nothing for to do.
Difference One:
Think of it as having a container in which you’ll align and distribute items.
In both cases, our container is the content box of the flex container.
Think of the things you’re aligning or distributing as alignment subjects.
With , the flex items are our alignment subjects.
With , the flex lines are our alignment subjects.
Difference Two: You can stretch flex lines, but you can’t stretch flex items.
That’s because works in the main axis.
Stretching flex items would mean changing their size in the main axis.
Because flex items have complete control over their sizing along the main axis in Flexbox, you can’t stretch them.
Difference Three:
The flex container is considered multi-line if it has : wrap or : wrap-reverse.
Stretching values are applied in the Sizing phase.
You already saw a description of this in a previous chapter.
Alignment and distribution values are applied at the very end of the Alignment phase.
This is done after flex items and flex lines have been sized (the Sizing phase).