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

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

From: Axel Dahmen <brille1@hotmail.com>
Date: Wed, 30 Jul 2014 16:33:53 +0200
To: www-style@w3.org
Message-ID: <lravno$m04$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 Wednesday, 30 July 2014 14:34:10 UTC

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