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

> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf
> Of David Hyatt
> Sent: Thursday, May 12, 2011 3:11 PM
> 
> 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.
> ...
> 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.

Yes, the definition in earlier flexbox spec (and I believe webkit implementation) is cleaner: block children are flex items, anything else must be wrapped into a block or made a block.

In practice, this was the #1 usability issue for new developers. Flexbox is clearly intended to lay out controls, yet simply placing controls leads to unexpected results and confusion.

Something like this (using old syntax):

	<div style="display:box; box-direction:vertical;">
		<button>yes</button>
		<button>no</button>
		<button>maybe</button>
	</div>

produces horizontal layout unless buttons are blocks, leaving impresson that "direction" property is broken.

And this

	<div style="display:box; box-direction:vertical;">
		<div style="box-flex:1;">one</button>
		<img style="box-flex:1;" src="two.jpg">
		<div style="box-flex:1;">three</button>
	</div>

Will produce vertical layout by accident, but "box-flex" will not have any effect on the image.

This kind of issues is likely to be very common. At the same time I can't think of what is there to be gained by not accepted controls and images as flexbox children.

Your example of 

	<div style="display:box; box-direction:vertical;">
		<img style="box-flex:1;" src="one.jpg">
		<img style="box-flex:1;" src="two.jpg">
	</div>

and

	<div style="display:box; box-direction:vertical;">
		<span>
			<img style="box-flex:1;" src="one.jpg">
			<img style="box-flex:1;" src="two.jpg">
		</span>
	</div>

producing different layout may appear to be a problem, but it is a problem that begins with misuse of flexbox in the first place -- flexbox is designed specifically for block layout, wrapping inline content into anonymous blocks is a workaround to avoid losing content entirely.

So that is the reasoning that brought us to accepting replaced inline blocks as flexbox items. We initially suggested that any inline blocks should work, what we have is a compromise, but if we wean to revisit the decision I would again suggest that inline blocks are included for consistency...

Alex

Received on Friday, 13 May 2011 23:54:08 UTC