Grow your CSS skills. Land your dream job.

flex-wrap

Last 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.

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.

Check out this Pen!

Related Properties

Other Resources

Browser Support

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

Blackberry browser 10+ supports the new syntax.

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).

Comments

  1. peter
    Permalink to comment#

    Thank you!

    In the example, could you give each .flex-container a border so it’s readily apparent to newbs like me? Just by looking I thought the iframe is the container.

  2. David

    Firefox doesn’t support flex-wrap: See here

    Anyone have a fix/workaround?

    • Permalink to comment#

      @supports not (flex-wrap: wrap) {
      /fallback/
      }

    • Doug
      Permalink to comment#

      we are dropping support for Firefox becuase of this. unreal that they are further behind than IE.
      so long Firefox

  3. Permalink to comment#

    Be patient, Doug. It will be there in a couple of versions.
    Your text to link here…

    • Doug
      Permalink to comment#

      ok : ) i just really wish i had it now but i’ll be patient.

  4. Hello chris
    i use firefox v27.0.1 and it’s not support flex-warp.
    why firefox doesn’t support flex-warp?

  5. Permalink to comment#

    Latest Firefox (28) supports flex-wrap!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".