To wrap or not to wrap
flex-wrap
Specify whether or not the elements of this flexible container should wrap when they don't fit within the container.
Property values
Use one of these keyword values:
| keyword | flex-direction:column | flex-direction:row |
|---|---|---|
| nowrap | Elements are positioned on a single line and may be clipped when the container reaches its maximum width | Elements are positioned in single column and may be clipped when the container reaches its maximum height |
| wrap | Elements will be positioned within a new line of elements when the container's max-width has been reached | Elements will be positioned within a new column of elements when the container's max-height has been reached |
| wrap-reverse | Elements will wrap, with new lines being added from bottom to top | Elements will wrap, with new columns being added from right to left |
Examples
display: flex;
flex-wrap: nowrap;