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;
flex-wrap
0

style > flexbox > flex-wrapTo wrap or not to wrap

🔗 🔎