- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Sun, 5 Aug 2012 20:49:13 -0700
- 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 UTC