CSS Flex Wrap

CSS Flex Wrap

The CSS flex-wrap property controls whether flex items must remain on a single flex line or can wrap onto additional lines when there is not enough space.

Flex containers use nowrap by default, so their items initially try to remain on one line. Using wrap or wrap-reverse allows a flex container to create multiple flex lines.

flex-wrap Values

The flex-wrap property has three primary values.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

The effect becomes visible when the flex items require more main-axis space than is available in the container.

flex-wrap: nowrap

The initial value of flex-wrap is nowrap. All flex items are placed on a single flex line.

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

When the items would otherwise require more space than the container provides, Flexbox attempts to fit them on the same line. Depending on their sizing and flex properties, the items may shrink or overflow.

Using nowrap is useful when the design specifically requires a single row or column of flex items.

flex-wrap: wrap

The wrap value allows flex items to move onto additional flex lines when they cannot fit on the current line.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

With the common combination of flex-direction: row and a left-to-right horizontal writing mode, items begin on the first row and additional lines are placed below it.

Wrapping is especially useful for groups of cards, buttons, tags, navigation items, and other components that need to adapt to different container widths.

flex-wrap: wrap-reverse

The wrap-reverse value also creates multiple flex lines when needed, but it reverses the cross-start and cross-end directions.

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

For a row-oriented flex container in a typical horizontal writing mode, this makes additional flex lines stack in the opposite cross-axis direction compared with wrap.

The order of items within each flex line is still controlled by the main-axis direction. wrap-reverse reverses the cross-axis direction of the flex lines, not the source order of the items.

Wrapping and Available Space

Wrapping depends on the available space in the flex container and the sizes of the flex items.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 180px;
}

If the container is wide enough for all the items, they can remain on one line even though flex-wrap: wrap is enabled.

As the available width becomes smaller, items that no longer fit are moved to additional flex lines.

This makes wrapping useful in responsive layouts because the number of items on each line can change with the available space.

Flex Direction and Wrapping

The effect of wrapping depends on the main axis established by flex-direction.

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

With row, items are placed along the inline axis and new flex lines are created along the cross axis.

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
}

With column, the main axis follows the block direction. When wrapping occurs, additional flex lines are created along the cross axis.

A column-oriented wrapping layout normally needs a constrained main size, such as a height, before the browser has a point at which items need to wrap into another column.

Multiple Flex Lines

Once wrapping creates more than one flex line, each line contains its own group of flex items.

Properties such as justify-content distribute items within each flex line along the main axis. The align-content property can distribute multiple flex lines along the cross axis when the container has extra cross-axis space.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

The upcoming Justify Content, Align Items, and Align Content tutorials explain these alignment controls individually.

The flex-flow Shorthand

The flex-flow property is a shorthand for flex-direction and flex-wrap.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

This is equivalent to:

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

The shorthand can be convenient when both the direction and wrapping behavior need to be declared together.

When to Use Flex Wrap

Use wrapping when a group of flex items should remain usable as the available space changes instead of being forced onto one line.

Wrapping should be chosen according to the intended design. It is not necessary simply because a container uses Flexbox.

CSS Flex Wrap Example

The following example compares nowrap, wrap, and wrap-reverse. Open the example in the editor and change the preview width to see how each container responds as the available space changes.

.nowrap {
  flex-wrap: nowrap;
}
.wrap {
  flex-wrap: wrap;
}
.wrap-reverse {
  flex-wrap: wrap-reverse;
}