Flex Wrap
The flex-wrap property determines whether flex items are forced onto a single line or can wrap onto multiple lines when they overflow the container.
Values & Behavior
| Value | Description |
|---|---|
nowrap | All items stay on one line. Items will shrink (if allowed) rather than wrap. |
wrap | Items wrap onto multiple lines from top to bottom (for flex-direction: row). |
wrap-reverse | Items wrap onto multiple lines but in reverse order (bottom to top for rows). |
.container {
display: flex;
flex-wrap: wrap; /* allow wrapping */
}
Code Example
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
width: 300px; /* container narrower than 4 items */
}
.item {
flex: 1 1 100px; /* grow, shrink, base width */
}
Result: Items 1–3 fit on the first row; item 4 wraps onto the second row.*
Use Cases
- Responsive Galleries: Automatically move thumbnails to new rows when the viewport narrows.
- Navigation Menus: Wrap menu items to a second line on smaller screens instead of shrinking text.
- Tag Clouds & Chips: Let labels flow onto multiple lines gracefully.
Tip: Combine with justify-content and align-content to control spacing of wrapped lines.
Backlinks