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

Re: [css3-flexbox] Too many flex-flow values?

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Fri, 16 Sep 2011 20:58:25 -0700
Message-ID: <BLU165-ds19092961C6604FA0B8A52FF8090@phx.gbl>
To: "Tab Atkins Jr." <jackalmage@gmail.com>, "www-style list" <www-style@w3.org>

-----Original Message----- 
From: Tab Atkins Jr.
Sent: Friday, September 16, 2011 1:22 PM
To: www-style list
Subject: Re: [css3-flexbox] Too many flex-flow values?

>On Wed, Sep 7, 2011 at 6:41 PM, Tab Atkins Jr. <jackalmage@gmail.com> 
>> Every time I look at the 'flex-flow' property, I get a headache.  I
>> think there are too many options there.  You can specify the flow
>> directions purely logically, purely physically, or an interesting
>> mixture of the two.
>> I've already logged an issue in the spec about dropping the mixed
>> physical/logical options, so we have only the all-logical and
>> all-physical ones.  That would significantly simplify the syntax
>> without, I think, actually killing any useful options.
>> Can we go further?  Grid Layout doesn't care about your pitiful
>> physical direction - the orientation and direction of rows and columns
>> are *always* tied directly to logical directions.  'flex-flow' would
>> be *so* much nicer if we could do the same:
>> flex-flow: [ row | row-reverse | column | column-reverse ]
>>           [ wrap | wrap-reverse ]?
>> *Are* there any significant use-cases that aren't addressed by this?
>> If so, why aren't these problems with Grid Layout as well?
>Based on the feedback in this thread, I'm going to remove the physical
>and semi-physical directions, and stick with solely the four logical

Please don't do that. I've seen in practice scenarios where
use of physical directions (explicit flow direction definition)
is the must.

I would suggest to use something like this:

flex-flow: horizontal
flex-flow: horizontal(auto)  // same as above, uses value of 'direction'
flex-flow: horizontal(ltr)     //  explicitly ltr
flex-flow: horizontal(rtl)     // explicitly rtl

And about 'row' and 'column'...

  flex-flow: row | column
makes not that much sense.

As far as I understand the intention of 'row' and 'column' names is to
be able to use *the same* style sheets/fragments for ltr/rtl *and* ttb 

I don't think such a sharing is feasible at all.

HTML/CSS layout model is a *vertical* endless "tape" - something
that has width but no height. By nature. Including human vision nature.

So HTML/CSS layout space *is* anisotropic - properties of horizontal
dimension quite different from vertical one.

You can switch LTR->RTL relatively easy ("simple" symmetry)
but LTR->TTB switch require principal changes.

TTB writing systems still use "vertical tape" media model where text
layout using very different principles than ltr/rtl ones.

So it is *very* optimistic to think that you can share the same more or
less complex logical  system of styles between LTR/TTB layouts.
No way in real life.

So that 'row' and 'column' in flex-flow is just a naïve attempt
but not a real solution, sorry.

>In particular, the feedback that convinced me was the fact that Grid
>Layout uses only logical directions, and Webkit claims it is actually
>easier for them to do pure logical (while it's neutral for IE).
>The fact that we don't have logical margins/width/etc means that this
>still doesn't allow you to design a writing-mode independent site, but
>that seems to be a problem we have to solve generally anyway, so I
>don't feel that partially working around the problem within Flexbox
>would be very productive.  (If this is a convincing objection, then we
>should drop the logical directions entirely, and change Grid to be
>physical as well.)

Use of *only* logical directions in Grid is conceptually wrong.

For ltr/rtl versions it probably makes sense to use logical
directions but for ttb systems use of only logical directions in
Grid is plainly wrong.

Andrew Fedoniouk

Received on Saturday, 17 September 2011 03:58:54 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:34:57 UTC