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

One more. We (Fantasai and me) like this one:

Option 8:

flex-flow: 
    [ row | row-reverse | column | column-reverse ] || [ wrap | wrap-reverse ] |

    [ horizontal | horizontal-reverse | horizontal-ltr| horizontal-rtl ] && 
    [ wrap| wrap-reverse | wrap-down| wrap-up ]? |

    [ vertical| vertical-reverse| vertical-ttb| vertical-btt ] && 
    [ wrap | wrap-reverse | wrap-left | wrap-right ]?


± -----Original Message-----
± From: Tab Atkins Jr. [mailto:jackalmage@gmail.com]
± Sent: Tuesday, July 26, 2011 3:50 PM
± To: Alex Mogilevsky
± Cc: Andrew Fedoniouk; fantasai; www-style@w3.org
± Subject: 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 23:34:33 UTC