flex-wrap

flex-wrap controls whether a flex container keeps one line or creates additional lines. It wraps flex items, not the text inside those items.

Make a second line

Three fixed 100px items plus gaps cannot fit in 240px. Wrap creates additional lines rather than shrinking these explicitly inflexible items.

<div class="items"><span>One</span><span>Two</span><span>Three</span></div>

.items {
  display: flex;
  flex-wrap: wrap;
  width: 240px;
  gap: 0.5rem;
}
.items span {
  flex: 0 0 100px;
  background: #dbeafe;
  padding-block: 0.5rem;
}

Let tags fit their container

Each tag uses its content size and moves to another line as needed. The individual tag can also wrap long text because wrapping the outer line alone would not solve that.

<div class="tags">
  <span>HTML</span><span>Accessible controls</span><span>Responsive layout</span
  ><span>Typography</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 20rem;
}
.tags span {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  padding: 0.5rem;
  background: #eff6ff;
}

Values and axes

The initial value is nowrap and the property is not inherited. Wrap allows lines; wrap-reverse reverses their cross-axis stacking direction. Cross-axis start and end depend on flex-direction and writing mode, so wrap-reverse is not always “bottom to top.” The newer balance keyword needs a separate compatibility check.

A flex container is required. Wrapping uses item sizing during line collection; a single oversized minimum can still overflow. Column wrapping needs a definite or constrained main size to create new columns.

Alignment and reading

Align-content distributes multiple lines when there is cross-axis space. Each line sizes its flex items separately; use Grid when columns should align across rows. Reverse wrapping does not fix an incorrect DOM or keyboard order. Avoid blanket old-IE support claims; verify the actual values and browser targets.

Sources and browser support

MDN: flex-wrap describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.