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


#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;


Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy