Comments on: flex-wrap

By: David Spector

David Spector — Fri, 21 May 2021 17:04:20 +0000

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.

By: Estul

Estul — Wed, 12 Feb 2020 19:37:46 +0000

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

By: David Spector

David Spector — Thu, 29 Aug 2019 14:53:07 +0000

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.

By: Juston

Juston — Mon, 04 Feb 2019 20:38:55 +0000

In reply to David. try using flex-flow

By: James Scholes

James Scholes — Wed, 20 Jun 2018 16:20:55 +0000

In reply to Marcus. that's because the shorthand is setting flex-basis not min-width

By: Cameron Gray

Cameron Gray — Wed, 31 Jan 2018 21:26:43 +0000

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?

By: Adam

Adam — Thu, 27 Oct 2016 08:51:11 +0000

In reply to Katherine.

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.

By: Os1r1s110

Os1r1s110 — Sat, 22 Oct 2016 04:00:44 +0000

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…

By: Katherine

Katherine — Mon, 03 Oct 2016 14:53:25 +0000

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 :(

By: Parvez

Parvez — Fri, 16 Sep 2016 06:12:32 +0000

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

By: Javier

Javier — Mon, 09 May 2016 00:14:04 +0000

Thanks! life saving tip for Safari developers

By: Jonny

Jonny — Fri, 26 Feb 2016 03:27:25 +0000

In reply to Marcus. Fixed my problem as well! Thanks!!!

By: Andrei Gheorghiu

Andrei Gheorghiu — Sun, 21 Feb 2016 10:30:24 +0000

In reply to saeed shabani. They're still struggling with flex-wrap, Saeed. No chance of implementing flex-warp anytime soon...

By: Trish

Trish — Tue, 18 Aug 2015 20:16:07 +0000

In reply to Marcus. LIFE SAVER, thanks @Marcus! This worked for me: flex: 1 0 50%;

By: Harris Robin

Harris Robin — Fri, 17 Jul 2015 19:44:16 +0000

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