[css-flex-grid]: 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 Wednesday, 30 July 2014 14:34:10 UTC