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

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

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Mon, 25 Jul 2011 00:36:50 +0000
To: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <D51C9E849DDD0D4EA38C2E5398569284120D2C3A@TK5EX14MBXC218.redmond.corp.microsoft.com>
± From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf
± Of fantasai
± Sent: Sunday, July 24, 2011 10:18 AM
± 
± 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 */

Like it. A variation of same set can even fit in one property:

Option 7.3

    flex-flow: [ rows | columns | horizontal | vertical ] || 
               [ normal | reverse | ltr | rtl | ttb | btt ] ||
               [ wrap | wrap-reverse | wrap-ltr | wrap-rtl | wrap-ttb | wrap-btt ]

Same set of examples:

    flex-flow: rows;                     /* forwards inline row (default) */
    flex-flow: horizontal;               /* forwards horizontal row */
    flex-flow: reverse;                  /* backwards inline row */
    flex-flow: wrap-reverse;             /* reverse-stacking forwards inline rows */
    flex-flow: reverse vertical;         /* backwards vertical column */
    flex-flow: reverse columns;          /* backwards block-oriented column */

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

or 

Option 7.3

    flex-flow: [ rows | columns | horizontal | vertical ] || 
               [ normal | reverse | ltr | rtl | ttb | btt ] ||
               [ wrap | wrap-reverse | wrap-left | wrap-right | wrap-down| wrap-up ]

(same set, different naming)


Received on Monday, 25 July 2011 00:37:27 GMT

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