W3C home > Mailing lists > Public > www-style@w3.org > January 2012

RE: [css3-flexbox] alignment test

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Fri, 6 Jan 2012 03:18:26 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>
CC: Tony Chang <tony@chromium.org>, "www-style@w3.org list" <www-style@w3.org>, John Jansen <John.Jansen@microsoft.com>, Arron Eicholz <Arron.Eicholz@microsoft.com>, Rossen Atanassov <Rossen.Atanassov@microsoft.com>
Message-ID: <D51C9E849DDD0D4EA38C2E539856928412DCE8CC@TK5EX14MBXC214.redmond.corp.microsoft.com>
± From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
± Sent: Tuesday, December 13, 2011 4:14 PM
± 
± The only reason to care about specs is to help achieve interop.  The only reason 
± to care about *old* specs is if you're trying to be feature-compatible to ease 
± migration from existing content, and in that case what you *actually* care about 
± is the de facto standard established by implementations, since that's what the 
± existing content was authored against.
± 
± According to the de facto standard of the Firefox and WebKit implementations, 
± 2009 Flexbox doesn't have flexible margins.

Great argument. If that logic applied to IE5, Netscape 3 and CSS2 a lot would be different now... But I don't really want to go into that discussion. For the purposes of this spec, there isn't much interop or content to follow, let's figure out what is good. I'll try to summarize the motivation and options:

I think we want this:

1) There should be a way to align all flexbox children with one setting
2) There should be a way to align individual flexbox items
3) Alignment should work the same way in flexbox and grid wherever it makes sense

(1) can only be a property. How about this:

	flex-align: start | end | center | baseline | stretch

that should be the most common use, so short name here seems the most useful and intuitive (same target as 'flex-pack' too).

(2) can be a property, or it can be done with margins. 
(2.a)If it is a property:

	flex-item-align: start | end | center | baseline | stretch

(2.b) If margins "just work", it is done like this (for vertical flexbox):

	"flex-item-align:start" == "margin-left:0; margin-right:auto;"
	"flex-item-align:end" == "margin-left:auto; margin-right:0;"
	"flex-item-align:center" == "margin-left:auto; margin-right:auto;"
	"flex-item-align:baseline" == *not possible*
	"flex-item-align:stretch" == "margin-left:0; margin-right:0;" *and* parent must have "flex-align:stretch"

(2.c) It is also an option to have per-item property *and* have margin:auto work. That is what grid currently does.

I can live with any of the above. There is no difference for implementation. I am not even sure why my preference is.

(3) is less of a consideration for making a decision here, we need to remember to get back to grid when we make one.

We'll need to discuss this at F2F and make sure we get a resolution we can stick to.

Alex
Received on Friday, 6 January 2012 03:18:59 GMT

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