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:
http://dev.w3.org/csswg/css3-flexbox/#order-accessibility

I think this example sends wrong message to future authors.

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

<header>...</header>
<div id='main'>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</div>
<footer>...</footer>

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

<body>
  <header>...</header>
  <nav>...</nav>
  <article>...</article>
  <aside>...</aside>
  <footer>...</footer>
</body>

If someone will want to style the layout for example as

n hhhh s
n aaaa s
n aaaa s
ffffffff

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.

http://terrainformatica.com
Received on Monday, 6 August 2012 03:49:41 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:58 GMT