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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 30 Jul 2014 16:52:03 -0500
Message-ID: <CAAWBYDCzFiMSwM+f1aS0L4wKWJhiEwvPY1af8Q_mHdCuMBEccw@mail.gmail.com>
To: Axel Dahmen <brille1@hotmail.com>
Cc: www-style list <www-style@w3.org>
Note that [css-flex-grid] isn't the right tag for any spec. Did you
mean css-flexbox or css-grid?

On Wed, Jul 30, 2014 at 9:33 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.

Using Flexbox, you can set the buttons to "flex: 33%;" or "flex: 50%;"
based on MQ.  They'll line-break based on that base size, then flex to
fill out the rest of the line if there are any gaps.

Using Grid and auto-flow, you can just set up the grid to have 2 or 3
columns based on MQ.

~TJ
Received on Wednesday, 30 July 2014 21:52:50 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:23 UTC