flex-wrap
Whether flex items may wrap onto new lines.
Syntax
flex-wrap: wrap;Values
| Parameter | Type | Description |
|---|---|---|
| nowrap | keyword | Everything stays on one line, items shrink (the default). |
| wrap | keyword | Items that do not fit move to the next line. |
Examples
Tags that wrap onto several lines:
<style>
.tags { display: flex; gap: 6px; width: 240px; border: 1px dashed gray; }
.tags span { padding: 4px 10px; background: lavender; border-radius: 12px; }
</style>
<div class="tags" style="flex-wrap: wrap;">
<span>html</span><span>css</span><span>javascript</span><span>php</span><span>python</span>
</div>Notes
Without wrap, items squeeze into one line and may overflow the container. flex-flow: row wrap sets the direction and wrapping at once.
See also
- flex-direction — The direction of the main axis of a flex container: items in a row or in a column.
- flex — A shorthand for how a flex item grows, shrinks and what size it starts from.
- gap — The gaps between items in flexbox and grid.
- align-content — Distributes the lines of a multi-line flex container, or the rows of a grid, along the cross axis.
Related recipes
In the tutorial
- Flexbox — Laying elements out in a row or a column with flexbox — axes, direction, gaps, alignment and wrapping.