UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
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.
Syntax
flex-wrap: nowrap | wrap | wrap-reverse- Initial value:
nowrap - Applies to: flex containers
- Inherited: no
- Computed value: as specified
- Animation type: discrete
Values
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 overflowwrap: multi-lines, direction is defined byflex-directionwrap-reverse: multi-lines, opposite to direction defined byflex-direction
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
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.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 21* | 28 | 11 | 12 | 6.1* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 4.4 | 7.0-7.1* |
For more informations about how to mix syntaxes in order to get the best browser support, please refer to our article on “Using Flexbox”.
Related guides
Related tricks
Adaptive Photo Layout with Flexbox
Filling the Space in the Last Row with Flexbox
Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements
Responsive Layouts, Fewer Media Queries
Useful Flexbox Technique: Alignment Shifting Wrapping
Other resources
- CSS Flexible Box Module Level 1 (W3C)
flex-wrap(MDN)- Improve Responsiveness With
flex-wrapin CSS (DigitalOcean)
Related
display
.element { display: inline-block; }
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
flex-direction
.element { flex-direction: column-reverse; }
flex-flow
.element { flex-flow: row wrap; }
flex-grow
.flex-item { flex-grow: 2; }
flex-shrink
.element { flex-shrink: 2; }
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.
Firefox doesn’t support flex-wrap: See here
Anyone have a fix/workaround?
@supports not (flex-wrap: wrap) {
/fallback/
}
we are dropping support for Firefox becuase of this. unreal that they are further behind than IE.
so long Firefox
try using flex-flow
Be patient, Doug. It will be there in a couple of versions.
Your text to link here…
ok : ) i just really wish i had it now but i’ll be patient.
Hello chris
i use firefox v27.0.1 and it’s not support flex-warp.
why firefox doesn’t support flex-warp?
They’re still struggling with
flex-wrap, Saeed. No chance of implementingflex-warpanytime soon…Latest Firefox (28) supports flex-wrap!
I’ve been experimenting with
flex-wraprecently, and found that Safari doesn’t support it (on desktop or mobile), although it claims to, ie.Modernizr.flexwrapis 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.
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.I’m running into Safari issues when combining
flex-wrapwithmin-width. Fun shit.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.
Cheers
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 :)
Yeah thanks Marcus! This helped me fix in Safari desktop version 8.0.5. Shorthand solution is also noted over at webkit bug 136041.
Thanks. This solved an Safari Desktop issue I was having!
LIFE SAVER, thanks @Marcus! This worked for me:
flex: 1 0 50%;Fixed my problem as well! Thanks!!!
that’s because the shorthand is setting flex-basis not min-width
@Marcus, you’re a star. This fixed my wrapping issues on ios8 cordova webview.
@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!
@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.
Thanks! life saving tip for Safari developers
Thank you very much Marcus. Your solution solved the problem. Appreciate it very much.
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 :(
Hi there. Not sure if this helps.
Lately I’ve notice that autoprefixer is adding display -webkit-box.
This breaks flex-wrap in ios 8 chrome and safari. Removing it makes it work.
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…
I am getting very weird behavior with flex-flow on desktop versus mobile. I have 23 images that I want to display in rows of two, all the way until the last row where it will display a single centered image. This is working great on desktop, but the effect is in reverse for mobile browsers. In mobile, the first image is the single image. Why would the behavior of ‘flex-flow: row wrap’ behave completely opposite in desktop versus mobile environment?
Just so people know, Firefox was fixed about six years ago and should now be supporting at least all the important parts of flex, if not all of it.
Thanks for this article. I have a use case for Flex-Flow: Column Wrap;
How do I make it column wrap to more than 2 rows? I makes patterns like this:
1 3 5 7
2 4 6 8
I want it to go:
1 4 7
2 5 8
3 6
When wrap occurs, the cross-axis spacing between items is 0, so one can use padding in the container or margin in the items to adjust the spacing. I have not seen this fact documented anywhere.