Skip to main content
WPFSharp Academy
Syllabus

CSS flex-wrap and flex-flow: Complete Guide with Examples

Badar KhalilUpdated October 1, 2026 4 min read
Share X Facebook LinkedIn WhatsApp

What are flex-wrap and flex-flow?

The CSS flex-wrap property controls whether flex items stay on a single line or wrap onto multiple lines when there is not enough space. The CSS flex-flow property is a shorthand that combines flex-direction and flex-wrap in one line. Together they are the foundation of responsive flexbox layouts without media queries.

Syntax

Code
.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

/* Shorthand */
.container {
  flex-flow:  ;
}

flex-wrap values explained

ValueBehavior
nowrap (default)All items stay on one line. Items may shrink or overflow the container.
wrapItems move to the next line when space runs out. New lines are added in the cross-axis direction (top to bottom in a row layout).
wrap-reverseItems wrap, but new lines are added in the opposite cross-axis direction (bottom to top in a row layout).

Why nowrap causes problems

By default flex items have flex-shrink: 1, so with nowrap they shrink until they hit their minimum content size. After that they overflow the container, which is a very common cause of horizontal scrollbars on mobile. Adding flex-wrap: wrap lets items keep a comfortable size and move to the next row instead.

The flex-flow shorthand

flex-flow accepts the direction and wrap values in any order. Both of these are valid and identical:

Code
flex-flow: row wrap;
flex-flow: wrap row;

If you write only one value, the other keeps its default. For example flex-flow: column equals flex-direction: column; flex-wrap: nowrap;.

Responsive card grid without media queries

The most popular pattern in modern CSS is combining wrap with the flex shorthand on children:

Code
.cards {
  display: flex;
  flex-flow: row wrap;
  gap: 16px;
}
.card {
  flex: 1 1 220px;
}

Here each card wants to be 220px wide, can grow to fill extra space and can shrink if needed. As the screen narrows, cards wrap automatically.

How wrap works with column direction

With flex-direction: column and flex-wrap: wrap, items wrap into new columns when they reach the container height. This requires a fixed height or max-height on the container, otherwise it never overflows and never wraps.

Real-world use cases

  • Tag lists, chips and badges that must flow to the next line.
  • Product and blog card grids.
  • Image galleries and logo clouds.
  • Button groups and filter bars on small screens.
  • Footer link columns.

Common mistakes

  • Forgetting flex-wrap: wrap and then wondering why items squeeze or overflow.
  • Using fixed widths with padding and no box-sizing: border-box, so items wrap earlier than expected.
  • Expecting last-row items to align like a grid. Flexbox rows are independent, so the last row can look uneven; use CSS Grid for strict columns.
  • Using wrap-reverse and forgetting the cross-axis direction also flips align-content and align-items behavior.

Best practices

  • Use flex-flow: row wrap as your default for card lists.
  • Use flex-basis (via flex: 1 1 200px) rather than fixed width for flexible cards.
  • Add gap for spacing instead of margins on each item.
  • Choose CSS Grid with auto-fit and minmax when you need perfectly aligned columns.

Tailwind CSS equivalents

flex-nowrap, flex-wrap, flex-wrap-reverse. Example: flex flex-row flex-wrap gap-4.

flex-wrap wrap example, flex-flow shorthand, responsive card layout CSS, CSS flexbox wrap items, flexbox without media queries, flexbox vs grid 2026, flex-wrap Tailwind, CSS flexbox cheat sheet, modern responsive design.

Frequently Asked Questions

What is the default value of flex-wrap?

nowrap.

Is flex-flow the same as flex-flow: row wrap?

The default flex-flow is row nowrap. Row wrap must be written explicitly.

Does flex-wrap work on column direction?

Yes, but the container needs a limited height so items can overflow into a new column.

What is the difference between wrap and wrap-reverse?

Wrap adds new lines after the previous one, wrap-reverse adds them before, flipping the cross-axis direction.

One-click copy

Code blocks ke Copy button se snippets copy karein. Cheat Sheet example mein flex-wrap aur flex-flow ke sab patterns maujood hain.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself CSS
Output

Press Run to execute.

Exercise: Fix the Overflowing TagsHTML

The tags overflow the container. Use the flex-flow shorthand so tags go to the next line when space runs out, keeping the row direction.

Try it Yourself HTML
Output

Press Run to execute.

Show expected output 
Tags wrap onto multiple lines using flex-flow: row wrap with no horizontal overflow.

This is a self-check — compare your result with the expected output above.

Was this page helpful?