W3C home > Mailing lists > Public > www-style@w3.org > October 2011

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

From: Andrew Fedoniuok <news@terrainformatica.com>
Date: Wed, 19 Oct 2011 22:09:23 -0700
Message-ID: <BLU165-ds12C072C6B509DC9B8EFBE5F8EB0@phx.gbl>
To: <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:05 UTC