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

On Sun, Aug 5, 2012 at 8:49 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> 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...

Regardless of whether we think authors "shouldn't" use elements for
styling, it's occasionally necessary in real web sites.  No reason to
pretend it doesn't exist or complicate the example trying to hack
around the need.

That said, the *proper* treatment of that example would use Grid
Layout instead.  Then you could achieve even more arbitrary layouts
with ease.

There is no way to manually break a flex line yet - we punted that to level 2.

~TJ

Received on Monday, 6 August 2012 15:44:48 UTC