Align and distribute flex items in main direction with
Alignment takes all flex items as a single chunk and moves them to a particular spot.
The default : flex-start takes flex items as a single chunk and places them at the start of the flex line.
Or, center takes the chunk and aligns its center to the center of the flex line.
Distribution takes the remaining space and distributes it around and between flex items.
Of course, this ends up moving the flex items into different spots, which is what we want.
If distribution can’t happen because there’s no space left, then fallback alignment happens.
Every distribution value like space-between or space-around has a fallback value.
This fallback value is the value that is used if the distribution value can’t do its job because there’s no space left.
For example, space-between has a fallback of center.
Gaps are always inserted between flex items, no matter what
If you center-align your flex items, the gaps will be there between the flex items.
If you use : space-evenly, you might expect that there will be even spaces around and between flex items.
But because gaps are always inserted between flex items, the spaces between the flex items will be bigger than those around the flex items.