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!

  6. Permalink to comment#

    I’ve been experimenting with flex-wrap recently, and found that Safari doesn’t support it (on desktop or mobile), although it claims to, ie. Modernizr.flexwrap is true. I’ve filed a bug report with Modernizr for this. Wanted to spread the word, since there seems to be some confusion around this property flying around in the wake of Firefox previously not having supported it.

    I left the same comment here by the way.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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