Avatar of Chris Coyier
Chris Coyier on (Updated on )

The flex-wrap property is a sub-property of the Flexible Box Layout Module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in, aiding responsiveness layout behavior without CSS media queries.

.flex-container {
  flex-wrap: wrap;

Reminder: The cross axis is the axis perpendicular to the main axis. Its direction depends on the main axis direction.


flex-wrap: nowrap | wrap | wrap-reverse
  • Initial value: nowrap
  • Applies to: flex containers
  • Inherited: no
  • Computed value: as specified
  • Animation type: discrete


flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;
  • nowrap (default): single-line which may cause the container to overflow
  • wrap: multi-lines, direction is defined by flex-direction
  • wrap-reverse: multi-lines, opposite to direction defined by flex-direction


In the following demo:

  • The red list is set to nowrap
  • The yellow list is set to wrap
  • The blue list is set to wrap-reverse

The flex-direction is set to the default value: row.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari

For more informations about how to mix syntaxes in order to get the best browser support, please refer to our article on “Using Flexbox”.

Other resources