Flexbox is one of those things that seems simple until it doesn't work. You set flex-wrap: wrap and expect items to wrap. Then they don't. Or they wrap but leave weird gaps. Or wrap-reverse flips things in ways you didn't expect.
Let's break down how flex-wrap actually works.
What flex-wrap Does
By default, flexbox tries to fit everything on a single line. flex-wrap controls what happens when items exceed the container width.
The three values:
| Value | Behavior |
|---|---|
nowrap (default) |
All items on one line. Overflow if needed. |
wrap |
Items break into multiple lines. |
wrap-reverse |
Same as wrap, but lines stack in reverse order. |
Why Items Don't Wrap (Even with flex-wrap: wrap)
The most common problem: you set flex-wrap: wrap but items still overflow.
The cause: min-width: auto on flex items.
By default, flex items refuse to shrink below their content's natural width. A long word, an image, or a fixed-width element can force the item wider than its container.
The fix:
.flex-item {
min-width: 0;
}
This allows items to shrink so wrapping can occur.
The align-content Trap
If you have a fixed height on the container and use flex-wrap: wrap, you might see unexpected gaps between rows.
The cause: align-content defaults to stretch, which distributes lines evenly to fill the container's height.
The fix:
.flex-container {
align-content: flex-start;
}
wrap-reverse Explained
wrap-reverse does exactly what it says: wraps in reverse. The cross-start and cross-end directions are swapped. This is useful for:
- Bottom-up layouts
- Certain animation effects
- Right-to-left wrapping
But it's confusing because the visual order doesn't match the DOM order.
Testing Flexbox Wrap Visually
If you want to see how wrap, wrap-reverse, and alignment constraints distribute items without writing code, I built a free CSS Flexbox Wrap Simulator. It runs 100% client-side:
👉 tools.kandz.me/flexbox-wrap
What's your biggest flexbox frustration? Let me know in the comments.
Top comments (0)