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


flex-wrap: nowrap | wrap | wrap-reverse

.flex-container {
  flex-wrap: wrap;


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


  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?

    • Sladex
      Permalink to comment#

      @supports not (flex-wrap: wrap) {

    • 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. Sladex
    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. saeed shabani
    Permalink to comment#

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

    • Andrei Gheorghiu
      Permalink to comment#

      They’re still struggling with flex-wrap, Saeed. No chance of implementing flex-warp anytime soon…

  5. Henric
    Permalink to comment#

    Latest Firefox (28) supports flex-wrap!

  6. Fredrik
    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.

    • Chris Coyier
      Permalink to comment#

      It’s Safari 6 (on iOS for sure, maybe Desktop too?) where it starts supporting flex-wrap. Which is tough, because Safari 5 did support flex in general. I recently had to support to a UA sniff and float things instead if it detected Safari 5.

    • Steven Vachon
      Permalink to comment#

      I’m running into Safari issues when combining flex-wrap with min-width. Fun shit.

  7. Marcus
    Permalink to comment#

    Hi there,
    Been playing with flexbox a little lately.
    Still not seeing the same level of support of the flex-wrap property on mobile as there is on desktop.

    Modern Desktop browsers nicely wrap flexed width/height items using min width and height. However, modern mobile browsers appear to require more explicit dimensions in order to get the wrapping working.

    Would really appreciate some more info on this.
    I can’t seem to find any working ipad examples, or much info that explains this difference.


  8. Marcus
    Permalink to comment#

    Ok, my bad. Using the shorthand to specify the min-width seems to resolve my mobile wrapping woes.

    So instead of..

    flex: 1;
    min-width: 250px;

    You should use
    flex: 1 0 250px;

    Feeling better now :)

    • DAN
      Permalink to comment#

      Yeah thanks Marcus! This helped me fix in Safari desktop version 8.0.5. Shorthand solution is also noted over at webkit bug 136041.

    • Martijn
      Permalink to comment#

      Thanks. This solved an Safari Desktop issue I was having!

    • Trish
      Permalink to comment#

      LIFE SAVER, thanks @Marcus! This worked for me:

      flex: 1 0 50%;

    • Jonny
      Permalink to comment#

      Fixed my problem as well! Thanks!!!

  9. Joseph Finlayson
    Permalink to comment#

    @Marcus, you’re a star. This fixed my wrapping issues on ios8 cordova webview.

  10. Heiko

    @Marcus: You are Genius!

    After being one step away from discrading my new responsive layout (a work of 6 days), I finally found this post.
    And indeed the short hand fixed the problem (not properly warping 3 flex boxes). Not only for mobile but also on the desktop (with FF and IE).

    Thanks again!
    Live Long and Prosper!
    May the force be with you!

  11. Harris Robin
    Permalink to comment#

    @Steven Vachon

    I found that you have to explicity set a width, not only a min-width for it to work properly on safari. ran into the same issue.

  12. Javier

    Thanks! life saving tip for Safari developers

  13. Parvez
    Permalink to comment#

    Thank you very much Marcus. Your solution solved the problem. Appreciate it very much.

  14. Katherine
    Permalink to comment#

    Has anyone experienced issues using flex-wrap with flex-grow/shrink in iOS 10? I am using it in a mobile app with phonegap and all other flex areas in the app work great.

    I am running into issues with a section where I have buttons that are supposed to wrap and flex size based on the button text. In Chrome they work perfectly but in the actual device they start to go outside the container and cause sideways scrolling.

    This is pretty much the code I am trying to use… it looks great in codepen but not in my app :(

  15. Os1r1s110
    Permalink to comment#

    Hi there, I would have a little question. Would it be possible with flexbox to wrap on a new line even if there would be enough space for all items on the same line. What I’m trying to achieve is the following:
    1. 3 items having a widht of 1/4 page
    2. Having only 2 items on the first row, with space-around styling
    3. Having the third item on a separate row, as if it was “wrapped”, so not centered, aligned left with the same spacing as the item right above it…

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.