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

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