Allowing flex items to wrap
By default, the flex container is single-line and doesn’t allow flex items to wrap into another line.
The flex container will collect all flex items into the same flex line no matter how big those flex items say they want to be.
This might mean that the flex items will be forced to shrink.
If the flex items can’t shrink anymore, they will overflow the flex container box. This is actually what you want when you create horizontally scrollable lists of cards, for example.
The line in which flex items are laid out is called a flex line.
These flex lines are like training wheels, they’re there to help the browser figure out where all the flex items should be laid out.
Flex lines are just a concept, they don’t exist in the DOM tree or in the box tree.
The browser uses the idea of flex lines to calculate the size and position of all the flex items, and then discards any information it has about those flex lines.
If the flex container doesn’t allow wrapping, that single flex line has the same size as the flex container box.
A lot of the time you’ll be working with flex containers that don’t allow wrapping. This means there’s only one flex line, and it has the same size of the flex container.
The flex container controls if the flex items are allowed to wrap into a new flex line with
By default, the flex container doesn’t allow its flex items to wrap, because : nowrap.
The flex container can allow flex items to wrap with : wrap.
That makes the flex container multi-line.
Flex items will get to say what size they’d like to have, and if they can’t fit on an existing flex line, they will be collected into a new flex line
Aside from letting flex items wrap, wrap and wrap-reverse affect the direction in which flex lines will stack
That direction is called the cross direction.
With wrap, the flex lines will stack in the same direction as lines of text in a column of text.
With wrap-reverse, the flex lines will stack in the opposite direction to lines of text in a column of text.