flex-wrap: when items overflow

Without wrap, items shrink

By default, flex items SHRINK to fit when they overflow the container. Five 200px-wide cards in a 600px container? Each becomes 120px wide.

.container { display: flex; }

That's often wrong. You want them to keep their natural size and WRAP to the next line:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Now items keep their width. When the row fills up, the next item drops to a new line. Classic "card grid" behavior.

The shorthand: flex-flow

flex-flow combines flex-direction + flex-wrap:

.container { flex-flow: row wrap; }      /* same as flex-direction: row + flex-wrap: wrap */
.container { flex-flow: column nowrap; }

Personal preference — the unshortened forms read clearer to most teams.

When you want NO wrap (default)

• Nav bars — links shrink, don't drop to a second line.
• Toolbars — buttons stay on one row.
• Tab strips — tabs scroll horizontally on overflow (with overflow-x: auto).

Default flex-wrap: nowrap is correct for these.

When you want WRAP

• Card grids — each card keeps its width, wrap as needed.
• Tag clouds — tags wrap as the container shrinks.
• Photo galleries.

For card grids in 2026 you'll often reach for Grid (next module) instead of flex-wrap. But flex-wrap is the simpler tool when items don't need to align across multiple rows.