Re: [css3-flexbox] Trying out flex units again

>-----Original Message----- 
>From: Tab Atkins Jr. 
>Sent: Thursday, February 03, 2011 10:46 AM 
>To: Mikko Rantalainen 
>Cc: www-style list 
>Subject: Re: [css3-flexbox] Trying out flex units again 
>
>On Thu, Feb 3, 2011 at 3:05 AM, Mikko Rantalainen
><mikko.rantalainen@peda.net> wrote:
>> I believe that separating the display model and flow (layout) would be
>> beneficial. I find Andrew's design a bit simpler (as much as I
>> understand it) and he seems to be able to do it with less features added
>> to current CSS specification.
>>
>> Perhaps all that we need is some kind of mapping from latest flexbox
>> spec to Andrews design. Then we can get all people speaking about the
>> same thing, hopefully. It currently seems to me that Andrew's design has
>> not been considered fully because some details are lacking (Andrew
>> understands those details, nobody else does).
>
>I agree that splitting out the various concepts currently bashed
>together in the 'display' property is sensical.  I don't agree with
>Andrew's particular method of separating them.  For example, I can't
>imagine what a "flow:radial; display:table;" layout would even look
>like - tables and pie menus have two fundamentally different methods
>of laying out descendants.  The two notions should be in the same
>category (layout managers) and be mutually exclusive on a single
>element.
>

Ok, let me try to explain from other perspective. Mathematical topology
this time :) 

The 'display' defines topology[1] of elements - relation of
elements that will be preserved in different transformations
of the system.

The 'flow' defines the "transformation" - particular layout of 
system of elements.

Consider this table:

<table #clockface>
  <tr><td>1</td><td>I</td></tr>
  <tr><td>2</td><td>II</td></tr>
  <tr><td>3</td><td>III</td></tr>
  <tr><td>4</td><td>IV</td></tr>
  ...
</table>

And this rendering: 

http://terrainformatica.com/w3/flow-radial.png

with this style:

table#clockface
{
  display:table;
  flow: radial(direction:cw, start:0deg); 
  margin-right:34px;
}

table#clockface td:nth-child(2)
{
  background:yellow;
}

As you see flow: radial preserves topology of display:table - 
you have rows there. Each row have two cells. Cells are still selectable
by td:nth-child(1), td:nth-child(2)

And let's take display:block... 

display:block for some element requires that 
next and previous its siblings have to be blocks too. 
Otherwise, if siblings are text nodes, they should be 
wrapped into "anonymous blocks/boxes".
Next and previous are [topo-]logical terms so 
display:block is a definition of local topology :)

But as we easily can imagine "Next" can be mapped on 
"right", "top", "bottom", "left" or even "underneath" - 
depends on the 'flow' method used - current transformation
applied.

[1] http://en.wikipedia.org/wiki/Topology

Cheers.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Friday, 4 February 2011 07:22:54 UTC