Re: [css3-flexbox] getting multiline flexbox back into the spec

On Tue, Jul 26, 2011 at 3:25 PM, Alex Mogilevsky <alexmog@microsoft.com> wrote:
> From: Andrew Fedoniouk [mailto:andrew.fedoniouk@live.com]
> ±   flex-flow: stack;
> ±
> ± Children replaced one on top another. Intrinsic dimensions of
> ± flex-flow: stack; container are equal to tallest/widest child dimensions.
> ± This kind of layout is used by tabs container and is not achievable in CSS
> ± at all at the moment.
>
> 'stack' is a very useful layout type, certainly needs to be supported. It is currently implemented by Grid layout:
>
> <div style="display:grid">
>        <div id="one">...</div>
>        <div id="two">...</div>
>        <div id="three">...</div>
> </div>
>
> Will do exactly what you want for stack:
> - initial values for grid-column and grid-row are 0
> - initial values for grid-column-span and grid-row-span are 1
> - grid will size to biggest child in both dimensions, then stretch children to be same size.
>
> It may not be intuitive to use grid to create stack. Perhaps it would be reasonable to support same behavior on flexbox. I’ll add it to issues.

Actually, Grid doesn't quite work here (but it's really close - quite
clever!), for the same reason you can't use multiple backgrounds to
simulate image fallback - if the top layer is partially transparent,
you'll see the lower layers through it.  One almost certainly wants
stacks to hide the lower layers.

However, the fact that this is so close to working means that it would
be really easy to define display:stack via copypasta.

(Alternately, we could add an option to Grid that suppresses the
display of parts of elements in a grid-cell when they're not the
topmost.  I don't think this is a great idea because, as you note,
it's not very intuitive to use Grid for this case.)


> ±   flex-flow: flow(1 2,
> ±                   1 3);
> ±
> ± The flow function is an explicit defintion of how container replaces its
> ± children.
> ± The flow(row1, row2, ..., rowN ) "function" contains comma separated list
> ± of row defintions. Each row contains white space separated list of
> ± integers - indexes of elements that will be replaced in the cell. Elements
> ± can span multiple cells.
>
> Interesting. I think functionality involving "cells" and "span" belongs to grid.

Yes, anything like this is very clearly Grid's territory.

~TJ

Received on Tuesday, 26 July 2011 22:51:06 UTC