W3C home > Mailing lists > Public > www-style@w3.org > June 2011

Re: [css3-flexbox] getting multiline flexbox back into the spec

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Tue, 7 Jun 2011 21:06:51 -0700
Message-ID: <BLU165-ds725D4C7C1264F26A16C40F8620@phx.gbl>
To: <www-style@w3.org>, "Eric A. Meyer" <eric@meyerweb.com>

-----Original Message----- 
>From: Eric A. Meyer 
>Sent: Tuesday, June 07, 2011 6:04 AM 
>To: www-style@w3.org 
>Subject: Re: [css3-flexbox] getting multiline flexbox back into the spec 
>
>    I would find it deeply odd to have to use a writing-direction 
>property to define layout order.  That would be like having to use 
>'text-align' to center element boxes.
>

Agree in general on this but I think we are missing some point in 
the discussion.

First of all I have to say that for three or so years using flexes, 
in particular flow:horizontal, I did not get any requests to provide 
anything close to box-direction.

flow:horizontal follows directionality of UI and it is perfectly enough
so far.

If you need non-default order of elements then it usually 
happens when a) you have known number of children and b) most
probably you will also need to replace elements in non-consecutive 
order. In this case you can use explicit, templated definition:

block-flow: 4-3-2-1; // or 
block-flow: 1-3-2-4; // or even
block-flow: 1-2-2-3
                  1-4-5-5; 

I would insist that "template" is a natural part of flex module. It 
simplifies layout definitions a lot.

OK, back to flow:horizontal and flow:horizontal-wrap...
These layouts are used when:

1) Number of children is not known upfront and/or 
2) the number can change dynamically.

Examples: headers/toolbars, footers/statusbars, panels with splitters
between them, etc.

Having visual flow to run in opposite direction from DOM order is
a source of permanent problems (who implemented LTR/RTL text editing 
will understand me here).

If we really want to provide explicit definition of order of blocks
then it can be done as:  

block-flow: horizontal; /* uses default directionality, @dir->direction */
block-flow: horizontal-ltr; /* left-to-right */
block-flow: horizontal-rtl; /* right-to-left */

block-flow: vertical;   /* uses default directionality: ttb */
block-flow: vertical-ttb; /* top-to-bottom */
block-flow: vertical-btt; /* bottom-to-top */

Explicit declaration as 'horizontal-ltr' is significantly 
more reliable than anything like 'direction:horizontal reverse'

By the way, you used keyword 'reverse'. It is 'reverse' to what actually?
I mean what exactly defines normal, non-reversed order then, 
the 'direction'?

-- 
Andrew Fedoniouk

http://terrainformatica.com
Received on Wednesday, 8 June 2011 04:07:29 GMT

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