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

On 06/09/2011 09:25 PM, fantasai wrote:
> Option 7:

Updating based on criticisms from the F2F right now...

Option 7 take II:

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

    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: rows;                     /* forwards inline row (default) */
    flex-flow: horizontal;               /* forwards horizontal row */
    flex-flow: reverse-line;             /* backwards inline row */
    flex-flow: reverse-wrap;             /* reverse-stacking forwards inline rows */
    flex-flow: reverse-line vertical;    /* backwards vertical column */
    flex-flow: reverse-line columns;     /* backwards block-oriented column */

    flex-flow: ltr;                      /* horizontal ltr row, auto stacking */
    flex-flow: ltr auto;                 /* same thing */
    flex-flow: ttb;                      /* vertical ttb column, auto stacking */
    flex-flow: ltr ttb;                  /* horizontal ltr row, ttb stacking */
    flex-flow: auto ttb;                 /* horizontal auto row, ttb stacking */

This basically ORs a physical-based syntax with a logical-based one,
but I think the logical-based one here is easier to read than using
'ab se' keywords.

The 'auto' keyword in the physical space allows physical-logical combinations,
like specifying top-to-bottom rows and having the in-line order follow the
writing mode (using either inline or block direction, whichever applies in
that dimension).

~fantasai

Received on Sunday, 24 July 2011 17:19:07 UTC