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

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>

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