RE: [css3-flexbox] Best way to denote flexible lengths

I was thinking about how usable old and new syntax are for somebody who is has not memorized the spec but using examples and autocomplete as reference.

From usability point of view, functional notation with multiple arguments is not very usable, regardless of argument order. I think the old, more explicit syntax is more clear and intuitive.

Of course it is hard to specify flexibility on multiple box model properties without a unit or a function (the alternative is multiple properties which nobody likes).

Here is a different option that I'd like to consider:
a) keep 'flex' property. It defines flexibility of width or height. The preferred length is the specified value of width or height (0 for absolute, 'auto' or any other value for additive)
b) flex() function has 3 arguments to set preferred length, positive and negative flex. I think it will be used rarely, so order of arguments and their order is not that important. Flex(positive-flex, negative-flex, preferred-length) is most usable for margins and padding (with preferred length usually zero).

With this, 
 width:auto; flex:1 == width:flex(1,0,auto);  
 width:0; flex:1 == width:flex(1,0,0);

for alignment, flex function usually has one argument:
 margin-top:flex(1) -- align to bottom  
 padding-top:flex(1) -- align content to bottom (as vertical-align:bottom)

There is *also* a viable option to not have flex() function at all and use 'auto' as equivalent of 'flex(1)' for properties other than width and height where flex is applicable. That will of course require that padding takes 'auto', and that will not allow for flexible padding with min value -- but it would be much much easier to use.

We have previously discussed an approach with no flex() function but auto==flex(1). I am not sure it was ever formally written down though, was it? It will really help to have a representative set of use cases at one place, like http://dev.w3.org/csswg/css3-gcpm/uc.html .

Alex

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Tab Atkins Jr.
Sent: Tuesday, March 08, 2011 2:33 PM
To: www-style list
Subject: [css3-flexbox] Best way to denote flexible lengths

There was some disagreement during the FtF presentation on Flexbox over how best to write flexible lengths.  In particular, the current syntax very slightly favors "absolute" flexes over "additive" flexes.
The discussion didn't go too far in person, so I'm bringing it to the list for more measured evaluation.

Here's a few options that were brought up:

(1)
Absolute flex can be specified by passing a single argument to the
flex() function, like flex(1). (The preferred width defaults to 0.) Additive flex can be specified by passing three arguments to the
flex() function, like flex(1,0,200px).
The simplest additive flex (flexing from 'auto') can be specified by just using 'auto'.

(2)
Additive flex can be specified by passing a single argument to the
flex() function, like flex(200px). (The positive flexibility defaults to 1.) Absolute flex can be specified by passing two arguments to the flex() function, like flex(0,1).

(3)
Absolute flex can be specified by passing a single argument to the
flex() function, like flex(1).
Additive flex can be specified by passing a single argument to the
flex-size() function, like flex-size(200px). (The positive flexibility defaults to 1.)

(4)
Absolute flex can be specified with the 'fl' unit, like 1fl.
Additive flex can be specified with the flex() function, like flex(200px). (The positive flexibility defaults to 1.)

(5)
Absolute flex can be specified by passing an integer to the flex() function, like flex(1).
Additive flex can be specified by passing a length to the flex() function, like flex(200px).


I don't have strong opinions on which choice to make, but I slightly lean toward (1) (it's what currently in the draft, after all).  What do other people think?

~TJ

Received on Wednesday, 9 March 2011 20:23:22 UTC