Comments on: flex-wrap https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Fri, 30 Sep 2022 18:52:36 +0000 hourly 1 https://wordpress.org/?v=6.4.3 By: David Spector https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1772483 Fri, 21 May 2021 17:04:20 +0000 http://css-tricks.com/?page_id=21097#comment-1772483 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 https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1754323 Wed, 12 Feb 2020 19:37:46 +0000 http://css-tricks.com/?page_id=21097#comment-1754323 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 https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1751083 Thu, 29 Aug 2019 14:53:07 +0000 http://css-tricks.com/?page_id=21097#comment-1751083 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 https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1662055 Mon, 04 Feb 2019 20:38:55 +0000 http://css-tricks.com/?page_id=21097#comment-1662055 In reply to David.

try using flex-flow

]]>
By: James Scholes https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1639568 Wed, 20 Jun 2018 16:20:55 +0000 http://css-tricks.com/?page_id=21097#comment-1639568 In reply to Marcus.

that’s because the shorthand is setting flex-basis not min-width

]]>
By: Cameron Gray https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1615490 Wed, 31 Jan 2018 21:26:43 +0000 http://css-tricks.com/?page_id=21097#comment-1615490 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 https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1604729 Thu, 27 Oct 2016 08:51:11 +0000 http://css-tricks.com/?page_id=21097#comment-1604729 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 https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1604665 Sat, 22 Oct 2016 04:00:44 +0000 http://css-tricks.com/?page_id=21097#comment-1604665 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 https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1604406 Mon, 03 Oct 2016 14:53:25 +0000 http://css-tricks.com/?page_id=21097#comment-1604406 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 https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1604137 Fri, 16 Sep 2016 06:12:32 +0000 http://css-tricks.com/?page_id=21097#comment-1604137 Thank you very much Marcus. Your solution solved the problem. Appreciate it very much.

]]>
By: Javier https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1601427 Mon, 09 May 2016 00:14:04 +0000 http://css-tricks.com/?page_id=21097#comment-1601427 Thanks! life saving tip for Safari developers

]]>
By: Jonny https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1599894 Fri, 26 Feb 2016 03:27:25 +0000 http://css-tricks.com/?page_id=21097#comment-1599894 In reply to Marcus.

Fixed my problem as well! Thanks!!!

]]>
By: Andrei Gheorghiu https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1599754 Sun, 21 Feb 2016 10:30:24 +0000 http://css-tricks.com/?page_id=21097#comment-1599754 In reply to saeed shabani.

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

]]>
By: Trish https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1596458 Tue, 18 Aug 2015 20:16:07 +0000 http://css-tricks.com/?page_id=21097#comment-1596458 In reply to Marcus.

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

flex: 1 0 50%;

]]>
By: Harris Robin https://css-tricks.com/almanac/properties/f/flex-wrap/#comment-1595934 Fri, 17 Jul 2015 19:44:16 +0000 http://css-tricks.com/?page_id=21097#comment-1595934 @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.

]]>