Flex Wrap in CSS
From the CSS Flexbox cheat sheet · Flex Container · verified Jul 2026
Flex Wrap
Control whether flex items wrap to new lines when they overflow the container
css
.container {
flex-wrap: nowrap; /* single line */
flex-wrap: wrap; /* multiple lines */
flex-wrap: wrap-reverse; /* wrap upward */
}html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>🎨 No Wrap
1
2
3
4
🎨 Wrap
1
2
3
4
📏 Controls line wrapping
💡 wrap allows multiple lines
⚡ wrap-reverse flips line order