The CSS flex-wrap property

Q: How do I make flex items wrap to a new line?

Set flex-wrap: wrap on the flex container. Items then flow onto additional lines when the row is full instead of shrinking to fit.

Q: Why are my flex items not wrapping?

The default is nowrap, which keeps everything on one line. Add flex-wrap: wrap to the container to allow wrapping.

Q: What is the difference between flex-wrap and flex-flow?

flex-flow is a shorthand for flex-direction and flex-wrap together, e.g. flex-flow: row wrap.

Q: How do I control the width items wrap at?

Set a flex-basis on the items, e.g. flex: 1 1 200px. They keep a roughly 200px width and wrap once the line cannot fit another.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS flex-wrap property decides whether flex items stay on one line or wrap onto several. The default, nowrap, keeps them on a single line and shrinks them to fit; wrap lets them flow onto new lines when they run out of room. It is the property that turns a rigid flex row into a responsive one.

Overview

By default a flex container keeps all its items on one line, squashing them smaller and smaller as space tightens — that is nowrap in action. flex-wrap lets you change that, so items spill onto a second (and third) line instead of being crushed.

Set flex-wrap: wrap and the container becomes genuinely responsive: items keep their comfortable size and simply wrap when the row fills up, which is exactly what you want for a row of tags, cards or buttons that should reflow on a narrow screen. The less-common wrap-reverse does the same but stacks the new lines in the opposite direction.

You will often see it folded into the flex-flow shorthand alongside flex-direction — flex-flow: row wrap sets both at once. Pair wrapping with a gap and you get clean spacing on every line without margin headaches.

Syntax

selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Values

The flex-wrap property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`nowrap`	Items stay on one line and shrink to fit. The default.
`wrap`	Items wrap onto new lines when they run out of room.
`wrap-reverse`	Items wrap onto new lines in the reverse cross-axis direction.

Example

Live example

<style>
  .tags { display: flex; flex-wrap: wrap; gap: 8px; font: 600 13px system-ui, sans-serif; }
  .tags span { background: #eef2ff; color: #3730a3; padding: 8px 14px; border-radius: 999px; }
</style>
<div class="tags">
  <span>HTML</span><span>CSS</span><span>JavaScript</span><span>Flexbox</span><span>Grid</span><span>Responsive</span><span>Accessibility</span><span>Performance</span>
</div>

Best practices

Use flex-wrap: wrap for rows of tags, chips, buttons or cards so they reflow instead of overflowing on small screens.
Combine it with gap for consistent spacing on every wrapped line.
Give items a sensible flex-basis (e.g. flex: 1 1 200px) so they wrap at a predictable width.
Remember the shorthand flex-flow: row wrap sets direction and wrapping together.

Frequently asked questions

How do I make flex items wrap to a new line?

Set flex-wrap: wrap on the flex container. Items then flow onto additional lines when the row is full instead of shrinking to fit.

Why are my flex items not wrapping?

The default is nowrap, which keeps everything on one line. Add flex-wrap: wrap to the container to allow wrapping.

What is the difference between flex-wrap and flex-flow?

flex-flow is a shorthand for flex-direction and flex-wrap together, e.g. flex-flow: row wrap.

How do I control the width items wrap at?

Set a flex-basis on the items, e.g. flex: 1 1 200px. They keep a roughly 200px width and wrap once the line cannot fit another.

flex-direction float

References