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

± From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf
± Of fantasai
± Sent: Sunday, June 05, 2011 7:32 PM
± 
± Option 6:
± 
±    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

Hmm, I like rows/columns, it is way more intuitive than any inline-axis/block-axis naming I've seen so far.

To complete the set of directions, we'll need to add direction of line stacking. Is that what "reverse-stack" means? Are you suggesting multiline to go like this? :

 * { writing-mode:lr-tb; /*initial value*/ }

 .multiline-tb-lr {
  flex-orientation:columns;
  flex-wrap:wrap;
  flex-direction:forward; /* initial value - columns stack LTR, as in table */ 
 }

 .multiline-tb-rl {
  flex-orientation:columns;
  flex-wrap:wrap;
  flex-direction:forward reverse-stack; /* columns stack opposite of table */
 }

I think with Option 6 as a base (which I like), there are a few variations:

Option 6a:
    flex-orientation: rows | columns | horizontal | vertical
    flex-wrap: no-wrap | wrap | balance*    
    flex-direction: forward | backward
    FLEX-WRAP-DIRECTION: FORWARD | BACKWARD

Option 6b:
    flex-orientation: rows | columns | horizontal | vertical
    flex-wrap: no-wrap | wrap | balance*    
    flex-direction: [forward | backward] || [WRAP-FORWARD | WRAP-BACKWARD]

Option 6c:
    flex-orientation: rows | columns | horizontal | vertical
    flex-direction: [forward | backward]
    flex-wrap: no-wrap | wrap | WRAP-REVERSE | balance*

Option 6d:
    FLEX-DIRECTION: ROWS |  ROWS-REVERSE | COLUMNS | COLUMNS-REVERSE | 
                    HORIZONTAL | HORIZONTAL-REVERSE | VERTICAL | VERTICAL-REVERSE
    flex-wrap: no-wrap | wrap | WRAP-REVERSE | balance*

(option 6d doesn't need separate orientation/direction properties)

What do you think?

Note that for any choice for direction properties there is also packing that needs to be defines in two dimensions. Something like 

    flex-pack: start | end | center | justify /* in current spec */
    flex-wrap-pack: before | after| middle | justify

(not sure BTW if there is a convention for how to name justification in transverse direction... there is 'middle' vs. 'center' -- should there also be a differentname for 'justify'? Maybe 'distribute' vs. 'justify'?)

Alex

Received on Monday, 6 June 2011 18:42:18 UTC