W3C home > Mailing lists > Public > www-style@w3.org > August 2014

Re: [css-flexbox]: How to force a wrap?

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 1 Aug 2014 07:54:52 -0500
Message-ID: <CAAWBYDANj7cnp+_vZh5dmq2m4ff4VTz897AXvF8-SJ=v3yWZRg@mail.gmail.com>
To: "A. D." <brille1@hotmail.com>
Cc: www-style list <www-style@w3.org>
On Aug 1, 2014 6:27 AM, "Axel Dahmen" <brille1@hotmail.com> wrote:
>
> http://jsfiddle.net/XFq59/110/
>
> Hi,
>
> I'd like the buttons from the example above to be displayed three in a row
> while watching the page in landscape view, and two in a row when watching
> the page in portrait view:
>
>
> ---------------------------------------------------------------------
> |
> |              Button #1   Button #2   Button #3
> |              Button #4   Button #5   Button #6
> |
> ---------------------------------------------------------------------
>
>
> --------------------------------------
> |
> |
> |
> |     Button #1   Button #2
> |     Button #3   Button #4
> |     Button #5   Button #6
> |
> |
> |
> --------------------------------------
>
>
> So, no matter how much free padding space there is (or isn't), I want the
> design to be either 3*2 or 2*3 buttons.
>
> How can I achieve this? Is flexible box layout the right approach to
achieve
> this?
>
> A table design approach wouldn't work, I assume, as it wouldn't be able to
> rearrange by @media rule.

I answered this in the previous version of this thread.

For flexbox, use `flex: 50%;` or 33%,v based on MQ. They'll linewrap based
on that width, then stretch to fill the remaining space.

Or use Grid with auto-flow, and swap between 2 and 3 columns in the grid
with MQ.

~TJ
Received on Friday, 1 August 2014 12:55:19 UTC

This archive was generated by hypermail 2.3.1 : Friday, 1 August 2014 12:55:19 UTC