Re: [css3-flexbox] auto margins and flex-align: baseline

On Wed, Apr 4, 2012 at 1:28 PM, Ojan Vafai <ojan@chromium.org> wrote:

> On Wed, Apr 4, 2012 at 12:50 PM, Tony Chang <tony@chromium.org> wrote:
>
>> I think the combination of auto margins and flex-align: baseline is going
>> to cause an extra pass through flex items.
>>
>> Here's an example:
>> <div style="display: flexbox; flex-align: baseline">
>>   <div><h1>h1</h1></div>
>>   <div><h3>h3</h3></div>
>>   <div><h6>h6</h6></div>
>> </div>
>>
>> In the above example, the h1 box has the largest ascent, so the h3 and h6
>> boxes are pushed down during flex alignment.  If we were to add margin:auto
>> to the div containing the h1, assuming there is free space, h1 would no
>> longer be baseline aligned and h3 and h6 should both move up.  However, we
>> need to re-compute the baseline max ascent to determine how far h3 and h6
>> should move.
>>
>> Currently, the code in WebKit computes the max ascent while we're laying
>> out the children after the main axis length has been computed (around step
>> 6 in the algorithm).  Later, it does an alignment pass and items that are
>> baseline aligned are moved to match the max ascent.  It looks like we won't
>> know whether margin:auto applies at the time we're computing max ascent.
>>
>> I see a few ways to handle this:
>> 1) Do an extra pass after margin:auto to determine the new max ascent.
>>  This works, but it's slow.
>> 2) margin: auto always causes flex-align/flex-pack to be ignored so we
>> can ignore it when computing the max ascent.
>> 3) Maybe only have margin: auto apply to the main axis direction?  I'm
>> not sure how many web developers are going to expect margin auto to work in
>> the cross direction.
>>
>> Other ideas?
>>
>
> I think it's very confusing that margin:auto does anything.
>
> <div style="display: flexbox;">
>   <div style="margin:auto; flex-align:start; flex-pack:start"></div>
>   <div style="margin:auto; flex-align:start; flex-pack:start"></div>
> </div>
>

Whoops. flex-align/flex-pack should be on the flexbox here, not on the flex
items.


> Anyone looking at that would expect the align and pack to be start. But
> instead it will render as flex-align:center and flex-pack:distribute.
> You're clearly asking for start here. Margin auto is this weird legacy hack
> for centering things. It has become intuitive to some subset of web
> developers because it's only way to get horizontal centering in a lot of
> cases.
>
> My strong preference is for margin:auto to always be treated as margin:0,
> but if we're going to have margin:auto do anything, then I'd prefer we add
> an auto value for flex-align and flex-pack that will be the default. They
> will respect margin:auto, but otherwise act as stretch and start
> respectively. If you set flex-align/flex-pack to anything other than auto
> then margin:auto is equivalent to margin:0.
>
> Ojan
>