Re: Flexbox Draft, with pictures!

--------------------------------------------------
From: "Brad Kemper" <brad.kemper@gmail.com>
Sent: Tuesday, May 25, 2010 9:24 PM
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "Alex Russell" <slightlyoff@google.com>; "David Hyatt" 
<hyatt@apple.com>; "Ojan Vafai" <ojan@chromium.org>; "www-style list" 
<www-style@w3.org>
Subject: Re: Flexbox Draft, with pictures!

>
> On May 25, 2010, at 6:17 PM, Tab Atkins Jr. wrote:
>
>> On Tue, May 25, 2010 at 6:11 PM, Alex Russell <slightlyoff@google.com> 
>> wrote:
>>> Given that "box" is shortest and seems to feel like it describes the
>>> parent and not the child, perhaps we can just keep that?
>>
>> The word "box" is already used throughout CSS to just mean "the thing
>> in CSS that is the equivalent to an element in a DOM tree".  I think
>> trying to use the term "box" to mean "flexbox" as the current draft
>> does is a big mistake as it overloads the word confusingly.
>
> Yeah, I agree. I was thinking that 'display:flex-block' and 
> 'display:inline-flex-block'
> would make it more consistent and understandable that using the term 
> "box".

What about defining the whole set of block elements with flex-block 
suffixes, e.g. :
  display: table-cell-flex-block;
  display: list-item-flex-block;
then ?

> Because it is a special kind of block or inline-block, right?

Block with flex layout inside is just an ordinary block.
The only difference is that it and its direct children
establish block formatting context.  In this respect
flexbox is more display:table-cell than anything else.

As I said it is significantly better to define LM in separate
property. In this case you will be able define layouts like this:

http://terrainformatica.com/w3/flow-template-list-item.png

Which is
<style>
      ol > li
      {
        display: list-item;
        flow: "1 3"
              "2 3";
        border-spacing: 6px;
      }
      ol > li > .date     { min-width:max-intrinsic; }
      ol > li > .content  { width:*; }
</style>

<ol>
    <li>
      <div .type>Web clip</div>
      <div .date>2010-05-25 19:34</div>
      <div .content>...</div>
    </li>
    ...
  </ol>

I think all this is pretty convenient, no?

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 26 May 2010 05:20:55 UTC