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

± From: Andrew Fedoniouk [mailto:andrew.fedoniouk@live.com]
± Sent: Monday, July 25, 2011 7:17 AM
± 
± >
± >Option 7.3
± >
± >    flex-flow: [ rows | columns | horizontal | vertical ] ||
± >               [ normal | reverse | ltr | rtl | ttb | btt ] ||
± >               [ wrap | wrap-reverse | wrap-left | wrap-right |
± > wrap-down| wrap-up ]
± >
± 
± What is the difference between
± 
±   flex-flow: rows;
± 
± and
± 
±   flex-flow: horizontal wrap;

'rows' is the logical direction. It is vertical when used in vertical text.
'wrap' is off by default, adding that keyword enables wrapping.

I see that it can be confusing that "rows" and "columns" are plural, even though usually used on a single-line flexbox. Perhaps they should be 'row' and 'column'

± 
±   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.


±   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.

Alex

Received on Tuesday, 26 July 2011 22:26:10 UTC