Skip to main content
Home / CSS Almanac / Properties / F / flex-wrap

flex-wrap

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.

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

The flex-wrap property accepts 3 different values:

  • 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

Syntax

flex-wrap: nowrap | wrap | wrap-reverse

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

Demo

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

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

See the Pen Flex-wrap: demo by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex; and friends)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box; and friends)
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
6+ (new) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 6+ (new)

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

icon-link icon-logo-star icon-search icon-star