Comments on: flex-wrap

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

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

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

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

By: James Scholes

Wed, 20 Jun 2018 16:20:55 +0000

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

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

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

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

http://codepen.io/ktrammell95/pen/pEAdpq?editors=1100

]]>

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

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

Thanks! life saving tip for Safari developers

]]>

By: Jonny

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

By: Andrei Gheorghiu

Sun, 21 Feb 2016 10:30:24 +0000

By: Trish

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

By: 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.

]]>