Wrapping and flex lines

Wrapping decides whether items stay on one line or form more lines.

nowrap

Alpha teamBeta teamGamma teamDelta team

The default keeps one flex line. Items may shrink or overflow when space is tight.

wrap

Alpha teamBeta teamGamma teamDelta team

Items that do not fit move onto a new flex line.

wrap-reverse

Alpha teamBeta teamGamma teamDelta team

The lines start from the opposite cross-axis edge; the DOM order stays unchanged.

Rows and columns

OneTwoThreeFourFive

In a column, the main axis is vertical, so wrapped items form new columns.

Important HTML

Many items share one flex container.

<div class="wrap-demo">
  <span>A</span><span>B</span>…
</div>

Important CSS

flex-wrap allows items to flow to new lines.

.wrap-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}