RE: [css3-flexbox] Baseline of flexboxes and flexbox items

± From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
± Sent: Monday, April 16, 2012 3:34 PM
± 
± On Mon, Apr 16, 2012 at 3:12 PM, Morten Stenshorne <mstensho@opera.com> 
± wrote:
± > "Tab Atkins Jr." <jackalmage@gmail.com> writes:
± >
± >> The baseline of a flexbox item is just whatever their display type 
± >> says it should be (there's no "flexbox item" display type).
± >
± > That would mean that a flexbox item with e.g. display:block and a 
± > flexbox item with display:inline-block would get their baselines 
± > calculated differently (first line vs. last line). Do we really want 
± > that?
± 
± It's the simplest answer.  Those display values had their baselines 
± defined that way for a reason.  There's no real reason to mix, say, 
± display:block and display:inline-block - they're treated identically by 
± Flexbox otherwise, so you might as well declare all the children as one 
± or the other if you want a particular baseline out of all of them.
± 
± On the other hand, table cells do their alignment with a special 
± definition, which you modified in your original post.  Hm.
± 
± Ojan, Tony, Alex, Daniel, do you have any particular opinion on this?
± I can specify it either way - we can either keep the current "flexbox 
± items have their normal baselines, based on their display value" or 
± determine the baseline the same way that table-cells do.
± 
± Also, what are all of you doing currently for the baseline of the 
± flexbox itself (for both 'row' and 'column' flexboxes, if it makes a 
± difference, and for the special case when the baseline of all the 
± children is perpendicular to the direction of the flexbox)?

Sorry I am joining this thread late, as I do have an opinion. It now takes some time to catch up...

We have discussed this before and we made a decision: http://lists.w3.org/Archives/Public/www-style/2011Feb/0693.html


It is also what I have implemented.

What we decided then was close to what's being discussed. The decision was:

 1. If the first flexbox child has a baseline, that's the baseline
  of the flexbox.
 2. If the first flexbox child doesn't have a baseline, or the 
 flexbox doesn't have any children, the baseline is the after inner
  edge of the flexbox.

Note that we came to that conclusion when there was no per-item alignment. With per-item alignment, that can be a little smarter:

 0. If any flexbox items are baseline aligned, their shared 
 baseline is the baseline of the flexbox.

The "first child" rule may seem to simple and may seem surprising that it doesn't depend on flexbox direction, but it seems to get sensible results in all cases - read the old thread for what we've considered then.

I believe we also agreed that the baseline of a flexbox item is what it would be if it was inline-block, inline-table etc. (inline-* version of its display type). I think it is the only answer that makes sense.

Alex

Received on Wednesday, 18 April 2012 01:28:20 UTC