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

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

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Mon, 6 Jun 2011 18:38:42 +0000
To: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <D51C9E849DDD0D4EA38C2E539856928412014027@TK5EX14MBXC213.redmond.corp.microsoft.com>
± 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 GMT

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