- From: Tony Chang <tony@chromium.org>
- Date: Wed, 4 Apr 2012 12:50:41 -0700
- To: www-style@w3.org
- Message-ID: <CAL-=4P1DbWoAP85o0aPLgTGDOpCxLAx72531qRATXT9LDh9ZOg@mail.gmail.com>
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