FlexBox Wrapping
FlexBox Wrapping
Currently CSS FlexBox is one of the most widely used and useful CSS layout features. It only needs to add a display: flex to the container to make the children in the container arranged side by side, which is simple, powerful and very tempting.
But there is a problem. If the container does not have enough space, by default, these children will not be wrapped to a new line. Therefore, we need to use flex-wrap: wrap to change this behavior.
Here is a typical example where we have a set of options that should be next to each other:
Enough container space
When the container space is small, the subitems in the container will be squeezed or even overflow the container. This should be expected and is not actually a "problem".
Insufficient space in container
Note that the children are still next to each other. To solve this problem, we need to use flex-wrap: wrap:
Example: Breadcrumb navigation
Breadcrumb navigation
Adjust the container size to see the effect