- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 18 Jul 2011 14:35:40 -0700
- To: Alex Mogilevsky <alexmog@microsoft.com>
- Cc: "www-style@w3.org" <www-style@w3.org>
On Mon, Jul 18, 2011 at 2:16 PM, Alex Mogilevsky <alexmog@microsoft.com> wrote: > ± -----Original Message----- > ± From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] > ± Sent: Monday, July 18, 2011 1:24 PM > ± > ± Given the following markup: > ± > ± <div display:flexbox> > ± <span> > ± foo > ± <div>bar</div> > ± baz > ± </span> > ± </div> > ± > ± ...do you get 1 or 3 flexbox items? Whether you're operating on the box- > ± tree or the element-tree changes the answer. In the element-tree, the > ± algorithm sees a single inline child, and creates a single anonymous > ± wrapper block. In the box-tree, the algorithm sees an anonymous block > ± box, the <div>'s block box, then another anonymous block box, for a total > ± of three items. > ± > ± You can detect the difference again with flex-pack:justify. > ± > ± Note that all browsers agree that table-fixup either operates on the > ± element-tree (after pseudo-element creation) or on the box-tree before > ± block-in-inline fixup (I can't figure out how to distinguish the two). > ± Flexbox should be consistent. > > Added to wiki: http://wiki.csswg.org/spec/css3-flexbox?&#issue-11 > > I think your example should produce 1 flexbox item. Anonymous blocks contained within an inline element could be treated as separate items, but it makes a lot of things more complicated. I would very much prefer that anonymous flexbox items don't cross element boundaries. I definitely agree - that's consistent with how display:table handles the similar case where the outer div is display:table-row and the inner div is display:table-cell. ~TJ
Received on Monday, 18 July 2011 21:36:37 UTC