On this page
CSS flex-wrap & flex-flow: Wrap Flex Items the Right Way
What Is flex-wrap in CSS?
The flex-wrap property controls whether flex items stay on one line or wrap onto multiple lines when they run out of space. By default, flexbox tries to squeeze every item onto a single line, which can make items shrink or overflow. With flex-wrap, you can build responsive flexbox layouts, card grids and tag lists without writing a single media query.
Syntax
.container {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}The default value is nowrap.
flex-wrap Values Explained
| Value | Behavior |
|---|---|
nowrap (default) | All items stay on one line. Items may shrink or overflow the container. |
wrap | Items move to a new line when there is not enough space. New lines are added in the cross axis direction (downward in a row layout). |
wrap-reverse | Items wrap like wrap, but new lines are stacked in the opposite cross axis direction (upward in a row layout). |
flex-wrap: nowrap
With nowrap, flexbox uses the flex-shrink property to shrink items until they fit. Once an item reaches its minimum content size, it can no longer shrink and the content overflows the container. This is the reason many developers see items being squashed or text breaking unexpectedly.
flex-wrap: wrap
With wrap, an item that does not fit moves to the next line. Each line becomes its own flex line, and items on every line are distributed according to justify-content. This is the foundation of responsive card layouts in flexbox.
flex-wrap: wrap-reverse
With wrap-reverse, the cross-start and cross-end are swapped. The first line appears at the bottom and later lines stack upward. It is rarely used, but it is helpful for bottom-anchored layouts.
The flex-flow Shorthand
flex-flow is a shorthand for flex-direction and flex-wrap.
/* flex-flow: */
.container {
display: flex;
flex-flow: row wrap;
}
/* Equivalent to: */
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}- The default value is
row nowrap. - You can write the two values in any order, because the keywords do not overlap.
- You can also give only one value:
flex-flow: column;sets the direction and leaves wrap at nowrap.
Responsive Card Layout with flex-wrap
Combine flex-wrap with the flex shorthand to build a responsive grid-like layout that adapts to any screen width.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 250px; /* grow, shrink, base width */
}Each card tries to be at least 250px wide. When the line cannot fit another 250px card, it wraps to the next line, and the remaining cards on that line grow to fill the space. This is a very popular flexbox layout pattern for blogs, product grids and dashboards.
flex-wrap vs CSS Grid
Flex-wrap makes each line independent, so items in different lines do not align into columns. If you need strict rows and columns, use CSS Grid. If you want items to flow naturally and fill each line, flex-wrap is perfect.
Common Mistakes
- Forgetting flex-wrap and wondering why items shrink. The default is nowrap.
- Using margins for spacing in wrapped layouts. Use the gap property to avoid extra space on the edges.
- Expecting the last row to align with the rows above. Each flex line is independent.
- Long text or images causing overflow. Add min-width: 0 or overflow handling to flex items when needed.
Best Practices
- Use flex-flow: row wrap for tag lists, galleries and card collections.
- Set a flex-basis (for example flex: 1 1 250px) so items wrap at a predictable width.
- Use gap instead of margins.
- Test with narrow screens and long content.
FAQ
What is the default value of flex-wrap?
nowrap.
What does flex-flow do?
It sets flex-direction and flex-wrap in one declaration.
Why is flex-wrap not working?
Usually because the items have a fixed width that is smaller than the container, so everything already fits on one line, or because the container is not a flex container.
Key Takeaways
- flex-wrap allows items to move to new lines.
- Values: nowrap, wrap, wrap-reverse.
- flex-flow = flex-direction + flex-wrap.
- Use flex: 1 1 250px with wrap for responsive card grids.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Create a responsive gallery of six boxes. Use the flex-flow shorthand to set a row direction with wrapping, add a 12px gap, and give each box flex: 1 1 150px so they wrap automatically when the screen gets narrower.
Press Run to execute.
Show expected output
Boxes display in rows with a 12px gap, wrap to new lines as the preview gets narrower, and grow to fill each line.This is a self-check — compare your result with the expected output above.
Was this page helpful?