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

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?

Tony

Received on Wednesday, 4 April 2012 19:51:10 UTC