flex-wrap

christian.dinh's avatar
christian.dinh's avatar
christian.dinh
Published Jul 23, 2021Updated Sep 3, 2021
Contribute to Docs

A property that specifies if elements will occupy multiple lines and the direction in which the items are distributed.

Syntax

#element-container {
  display: flex;
  flex-wrap: <wrap-value>;
}

The <wrap-value> can be one of three options:

  • wrap
  • nowrap
  • wrap-reverse

Example 1

Content that does not utilize multiple lines:

#spam-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

All contributors

Contribute to Docs

Learn CSS on Codecademy