[flex/flows, flexbox] extending list of layout managers

Not a question but rather thoughts aloud...

I have custom 'flow' property and flex units [1] that are super set of 
flexbox[2]  features.
In my interpretation the 'flow' defines layout manager used to replace child 
boxed elements.

Examples:
my 'flow:horizontal' is 'flex-flow:row'
my 'flow:horizontal-wrap' is 'flex-flow:row wrap'

The 'flow' allows also to define grids with cell spans, for example:

flow: "1 3"
         "2 3";

is an equivalent of table where third cell spans two rows.

The grid is quite useful and is used a lot but it has a limitation -
it is fixed  - defines finite number of elements.

Consider this markup:

<dl>
   <dt>Foo</dt>   <dd>all about the Foo</dd>
   <dt>Bar</dt>   <dd>all about the Bar</dd>
   ...
</dl>

The goal is to replace these elements as if they are placed  in table:
<table>
   <tr><td>Foo</td>  <td>all about the Foo</td></tr>
   <tr><td>Bar</td> <td>all about the Bar</td></tr>
   ...
</table>

So first column will contain all dt's and second - all dd's

In order to provide such feature I am thinking about definition like this:

flow: row(...list-of-elements...);
flow: column(...list-of-elements...);

Thus for the <dl> above we would use

dl  {  flow: row(dt,dd); }  /* 2 column grid with dt,dd in each row */
dl > dt { white-space: nowrap; }
dl > dd { width:*; }          /* second 'dd' column is a "spring" of 1fx */

I think that something like this should be available in flexbox too.
But I do not see how this feature may fit in current flexbox spec.
Seems like flexbox specification assumes closed and quite limited
set of layout managers - just four of them actually.

-- 
Andrew Fedoniouk

http://terrainformatica.com


[1] http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
[2] http://dev.w3.org/csswg/css3-flexbox/

Received on Thursday, 20 October 2011 05:09:56 UTC