Re: [css-flexbox] Flex box does not respect inline children/groupings

On Wed, Feb 12, 2014 at 1:36 AM, Eric Eastwood <me@ericeastwood.com> wrote:
> I recently made a chrome
> issue(https://code.google.com/p/chromium/issues/detail?id=342243) on it and
> I thought I would bring it here to a more general audience.
>
> I think that inline elements should be clumped with "contiguous run[s] of
> text"(http://www.w3.org/TR/css3-flexbox/#flex-item) to form a single flex
> item:
> (text-node)+(inline-element)+(text-node)+(more-inline-elements)=(flex-item)
>
> Currently Chrome 32, FF 27, Opera 19 break up inline elements into separate
> flex items
>
> Not breaking up contiguous inline elements + text nodes especially makes
> sense especially with this use case:
> HTML:
> <div class="flex">
> Heya, <span>nice</span> day isn't it
> </div>
>
> Will be rendered on each line like with `flex-direction: column`.
> Heya,
> nice
> day isn't it
>
> See demo: http://jsfiddle.net/MadLittleMods/kSY5t/
>
> Of course this effect can easily be mitigated in the current state of things
> by just wrapping everything you want to actually act inline as one in
> another element.
> <div class="flex">
> <div>
> Heya, <span>nice</span> day isn't it
> </div>
> </div>
>
> Renders:
> Heya, nice day isn't it
>
>
> To quote something I wrote in the chrome issue:
>
> "Although it would slightly break the layout of some sites. It is extremely
> easy to fix and someone using the flex box model at this point in time is
> probably pretty proactive at getting their site fully functional again. I
> doubt this will affect many peoples layout as most will not be using inline
> nodes as flex items.
>
> For the flex model's sake I would rather make the change that effects only a
> tiny portion of early adopters (remember only inline nodes affected)."

This design is intentional.  We originally grouped text and inline
boxes together as you suggest, but it resulted in very confusing
behavior when people put <button> or <img> or <input> inside their
flexboxes, as they are all inline by default.  This can of course be
"fixed" by explicitly specifying them to be display:block, but it was
a common enough confusion that it was deemed better to address it
directly by making everything a flex item.

Flexbox isn't really designed to be a prose container, anyway.  It
*allows* naked text inside of it, because handling it is friendlier
and useful for some simple use-cases, but it doesn't go out of its way
to make that easier.

If you're using a Flexbox wrapper solely to take advantage of its
alignment properties, you're gonna need an additional <div> wrapper to
act as the flex item.  Sorry, but our work on spreading the alignment
properties to the rest of the layout modes
<http://dev.w3.org/csswg/css-align/> is proceeding nicely, so
hopefully in a year or so you'll be able to just say "align-content:
center;" on a display:block element and it'll work great!

Tangential note: the breakage from making your suggested change
wouldn't be small.  It would be mild to moderate (and sometimes major)
breakage for horizontal flexboxes, as images and buttons and other
things like that suddenly won't flex or align properly.  It would be
*major* breakage for vertical flexboxes, as they'll all line up
horizontally instead all of a sudden.  I know that at least one site I
have where I use flexbox would *completely* break, as it uses inputs
and buttons and textareas as flex items.

~TJ

Received on Tuesday, 18 February 2014 19:14:49 UTC