[css3-flexbox][css3-grid] Inline replaced elements as grid items and flexbox items

Both CSS3 flexbox and CSS3 grid specify that an inline replaced element can act as a grid item or flexbox item.  This seems very strange to me, especially in the case of a vertical flexbox.  If I am understanding what the two drafts are saying, something like:

<img><img>

will result in two vertically stacked images in a vertical flexbox, but

<span><img><img></span>

will not.

I sort of get the motivation for it (i.e., avoiding having to say display:block explicitly just to flex a control), but it seems like we're trying to guess the author's intent here.  I can envision use cases where the author would have just been thinking in terms of inline progression and other cases where the author would have wanted the objects to flex.

Anyway, my preference would be that people just have to put display:block on replaced elements in grids and flexboxes.  Assuming people don't agree, let's at least state that the display is effectively block-level (similar to floats/positioned elements, since that's how I imagine most of us would implement this).

This seems like it could become really confusing, though, especially for bullet images or emoticons etc., that are appearing mixed in with other inline content, e.g.,

<div>Hello <img src="smiley.gif"> world</div>

dave
(hyatt@apple.com)

Received on Thursday, 12 May 2011 22:11:17 UTC