W3C home > Mailing lists > Public > www-style@w3.org > May 2010

Re: Flexbox Draft, with pictures!

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Tue, 25 May 2010 18:45:52 -0700
Message-ID: <EA36209934B84301B1BA37232C894773@terra3>
To: "Alex Mogilevsky" <alexmog@microsoft.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, "www-style list" <www-style@w3.org>


--------------------------------------------------
From: "Alex Mogilevsky" <alexmog@microsoft.com>
Sent: Tuesday, May 25, 2010 2:59 PM
To: "Tab Atkins Jr." <jackalmage@gmail.com>; "www-style list" 
<www-style@w3.org>
Subject: RE: Flexbox Draft, with pictures!

> 3) On the merits of the proposed changes: I believe the original draft is 
> very simple and elegant, and adds a lot of power with minimal new 
> concepts. Proposed draft doesn't quite have leave that impression. This by 
> itself is not an issue but as this is the list of my concerns I have to 
> put it here.
>

Old and new specs share the common major problem:
they are trying to put definition of layout manager
(e.g. flexbox) into the 'display' attribute.

At the moment we have at least four different
layout managers that are all about different manners
of replacing children of block elements:
1) flex box
2) "template"
3) multi-column
4) and default layout manager.
5) (other layout mangers are emerging)

Here are couple of samples that demonstrate the problem:

a)
<td style="display:flexbox">
    Is this cell a display:table-cell element?
</td>
<li style="display:flexbox">
    Is this list item a display:list-item element?
    If not then what about its bullet?
</td>

b)
Consider this:
.container
{
   display: flexbox;
   columns: 12em;
}
What will win here? flexbox or multi-col?

It has to be separate property that will define
layout manager used, e.g. 'flow' or 'layout':

flow: 'auto' | 'columns' | 'horizontal' |
         'vertical' | "...template...";

Layout managers are mutually exclusive. You
cannot use horizontal layout (or any other
from flexbox family) and e.g. columns.
So it *must* be single property that defines
method of replacing block children inside a block.

So you will be able to say:

{
   display: table-cell;
   flow: horizontal;
}

or
{
  display: list-item;
  flow: "1 2"
        "3 3";
}

-- 
Andrew Fedoniouk

http://terrainformatica.com




 
Received on Wednesday, 26 May 2010 01:46:25 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:27 GMT