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

On 06/10/2011 03:40 AM, Tab Atkins Jr. wrote:
> On Sun, Jun 5, 2011 at 7:32 PM, fantasai<fantasai.lists@inkedblade.net>  wrote:
>>   flex-orientation: rows | columns | horizontal | vertical
>>
>>   flex-wrap: no-wrap | wrap | balance*
>>
>>   flex-direction: [ forward | backward ] || reverse-stack
>>
>> * taken from howcome's balance-lines suggestion, to show how it would be
>> added
>>   if we decide to add it for flexbox
>
> If we move away from explicit directions like Alex wants, then 'rows'
> and 'columns' are definitely the best names yet.
>
> I think flex-wrap is the best way to flag single vs multiple, and I
> like how it allows future extension in a clean way.
>
> I still think that flex-direction is a mistake.  You don't want to
> control the direction and orientation independently - they are both
> just "the direction of the flexbox".  I don't believe there is any
> use-case for the two cascading separately.
>
> I want the complete direction of the flexbox to be specified in a
> single property, and I think 'flex-direction' is the best name for it.
>   I'm not sure what the best names are, though.  As a first draft,
> something like this:
>
> flex-direction: [ rows | columns | horizontal | vertical ] [
> reverse-flow || reverse-stack ]?
> (initial value: 'rows')
>
> By default, flexboxes flow their children and their lines in the
> inline-flow and block-flow directions (whichever is appropriate for
> each).  Adding 'reverse-flow' makes the children lay out in the
> opposite direction, while 'reverse-stack' makes the lines stack in the
> opposite direction.
>
> I think it's more obvious and intuitive to just indicate the
> directions exactly, like "lr-tb" or "se-ba" (which are equivalent in
> English text), but this seems to be less popular. ;_;

Maybe because your abbreviations are super confusing?

Option 7:
   flex-wrap: no-wrap | wrap | balance
   flex-flow: [ rows | columns | horizontal | vertical ] || [ reverse || reverse-wrap ]
              |
              [ [ ltr | rtl ] || [ ttb | btt ] ]
              |
              wrap [ ltr | rtl | ttb | btt ]


   Any missing directions are taken from the writing mode. Forwards for
   a particular dimension is matching the block or inline direction
   (whichever) is appropriate.

   flex-flow: reverse;          /* backwards inline row */
   flex-flow: reverse-wrap;     /* reverse-stacking forwards inline rows */
   flex-flow: rows;             /* forwards inline row */
   flex-flow: horizontal;       /* forwards horizontal row */
   flex-flow: reverse vertical; /* backwards vertical column */
   flex-flow: reverse columns;  /* backwards block-oriented column */
   flex-flow: ltr;              /* horizontal ltr row, auto stacking */
   flex-flow: ttb               /* vertical ttb column, auto stacking */
   flex-flow: ltr ttb;          /* horizontal ltr row, ttb stacking */
   flex-flow: wrap ttb;         /* horizontal auto row, ttb stacking */

I think that pretty much gets you everything. The syntax definition is a mess,
but the resulting values are readable.

~fantasai

Received on Friday, 10 June 2011 04:25:33 UTC