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

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

From: Axel Dahmen <brille1@hotmail.com>
Date: Fri, 1 Aug 2014 13:24:57 +0200
To: www-style@w3.org
Message-ID: <lrftdf$ike$1@ger.gmane.org>
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

This archive was generated by hypermail 2.3.1 : Friday, 1 August 2014 11:25:10 UTC