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

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.

Your help is appreciated.

Regards,
Axel Dahmen 

Received on Friday, 1 August 2014 11:25:09 UTC