flex-wrap
Control flex line wrapping and cross-axis stacking.
Overview
| Class | Declarations |
|---|---|
flex-wrap | flex-wrap: wrap;
|
flex-wrap-reverse | flex-wrap: wrap-reverse;
|
flex-nowrap | flex-wrap: nowrap;
|
flex-wrap:<value> | flex-wrap: <value>;
|
Examples
Allow items to wrap
flex-wrap creates additional flex lines when the items’ outer sizes no longer fit. Each item here keeps a 96px width; the 336px row fits three items with two 12px gaps, then starts a second line.
<div id="layout" class="flex flex-wrap gap-sm w:21rem max-w:100%"> <div id="item-1" class="flex:none h:4rem w:6rem p-sm">01</div> <div id="item-2" class="flex:none h:4rem w:6rem p-sm">02</div> <div id="item-3" class="flex:none h:4rem w:6rem p-sm">03</div> <div id="item-4" class="flex:none h:4rem w:6rem p-sm">04</div> <div id="item-5" class="flex:none h:4rem w:6rem p-sm">05</div></div>Generated CSS
@layer theme { :root, :host { --spacing-sm: .75rem }}@layer utilities { .flex { display: flex } .flex-wrap { flex-wrap: wrap } .gap-sm { gap: var(--spacing-sm) }}Wrapping and shrinking are separate decisions. flex:none holds these specimens at their own widths so the line breaks remain easy to see. A narrower preview may fit only two items per line.
Keep items on one line
flex-nowrap keeps one flex line. It does not disable shrinking by itself. These items use flex:none to preserve their widths, so the row needs horizontal scrolling to reach all five.
<div id="layout" class="flex overflow-x:auto flex-nowrap gap-sm w:21rem max-w:100%" tabindex="0" aria-label="Single-line collection"> <div id="item-1" class="flex:none h:4rem w:6rem p-sm">01</div> <div id="item-2" class="flex:none h:4rem w:6rem p-sm">02</div> <div id="item-3" class="flex:none h:4rem w:6rem p-sm">03</div> <div id="item-4" class="flex:none h:4rem w:6rem p-sm">04</div> <div id="item-5" class="flex:none h:4rem w:6rem p-sm">05</div></div>Reverse wrap direction
flex-wrap-reverse reverses the direction in which flex lines are stacked. In this horizontal row, the first source items appear on the bottom line and later items appear above. Their order within each line remains unchanged.
<div id="layout" class="flex flex-wrap-reverse gap-sm w:21rem max-w:100%"> <div id="item-1" class="flex:none h:4rem w:6rem p-sm">01</div> <div id="item-2" class="flex:none h:4rem w:6rem p-sm">02</div> <div id="item-3" class="flex:none h:4rem w:6rem p-sm">03</div> <div id="item-4" class="flex:none h:4rem w:6rem p-sm">04</div> <div id="item-5" class="flex:none h:4rem w:6rem p-sm">05</div></div>This changes the cross axis. To reverse items along the main axis, use flex-direction. The DOM order remains 01 through 05.
Apply conditionally
Use conditional queries to allow wrapping from sm. The collection stays one scrollable row at smaller viewport widths. Its maximum width remains 336px, so the breakpoint changes line formation without making every item fit on one line.
<div id="layout" class="flex overflow-x:auto flex-nowrap gap-sm w:21rem max-w:100% flex-wrap@sm" tabindex="0" aria-label="Responsive collection"> <div id="item-1" class="flex:none h:4rem w:6rem p-sm">01</div> <div id="item-2" class="flex:none h:4rem w:6rem p-sm">02</div> <div id="item-3" class="flex:none h:4rem w:6rem p-sm">03</div> <div id="item-4" class="flex:none h:4rem w:6rem p-sm">04</div> <div id="item-5" class="flex:none h:4rem w:6rem p-sm">05</div></div>gap supplies both row and column spacing. Use gap-x:* and gap-y:* when the two distances should differ.