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

[css3-flexbox] Example 6 ( multi-column layouts )

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Sun, 5 Aug 2012 20:49:13 -0700
Message-ID: <CALRQH7-Lwic5i+RBU3j85aqtZH_MBx+JAHp-D05g6xKwdiQZQQ@mail.gmail.com>
To: www-style@w3.org
This message is about Example 6 here:

I think this example sends wrong message to future authors.

It recommends to use structural <div #main> for styling
purposes solely (A):

<div id='main'>

Ideally the markup should be agnostic to CSS layout manager used.
So it should look like this (B):


If someone will want to style the layout for example as

n hhhh s
n aaaa s
n aaaa s

then this shall not require change of the markup.

So I think this sample should be rewritten to use (B) markup
and something like this:

body { display: flex; flex-direction: row wrap; }
body > article { flex:1;}
body > nav     { width: 200px;}
body > aside   { width: 200px;}

but I didn't find any way to apply row break in current spec.
Is this feature there at all?

I am looking for clear:after|before feature:

body > * { float:left; }
body > header { clear:after; }
body > footer { clear:before; }

but for flex rows...

Andrew Fedoniouk.

Received on Monday, 6 August 2012 03:49:41 UTC

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