Re: Fw: RE: [css-flexbox] Summary of planned changes to Flexbox Module

--------------------------------------------------
From: "L. David Baron" <dbaron@dbaron.org>
Sent: Sunday, May 09, 2010 1:58 PM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <robert@ocallahan.org>; "Tab Atkins Jr." <jackalmage@gmail.com>; "Adam 
Del Vecchio" <adam.delvecchio@go-techo.com>; <www-style@w3.org>
Subject: Re: Fw: RE: [css-flexbox] Summary of planned changes to Flexbox 
Module

> On Sunday 2010-05-09 12:48 -0700, Andrew Fedoniouk wrote:
>> I think that algorithm used in Gecko has an error or
>> if it is correct (that mysterious "additive" to something?)
>> then it is highly non-intuitive.
>
> Flex is an addition to the preferred width, not a replacement for
> it.  Having it this way is essential for building complex widgets
> using flex.  For example, suppose you have a widget like the URL bar
> in Firefox where one part in the middle is flexible (the part where
> you enter the text) but there are a bunch of other parts (favicon,
> bookmark and SSL indicators).  If you want to use that widget in
> something larger where it is, itself, flexible (but say, not the
> only flexible thing), you still don't want it to end up smaller than
> the sum of the minimum width of its flexible part and the widths of
> its nonflexible parts.  So you don't want to assign it a width; you
> want to say that it has a width to start off, and then it flexes to
> fill additional space (because that flex really ends up being
> assigned to the one flexible piece inside it).

I do not understand what "addition to the preferred width" means.
In your document you are mentioning that flex value can make
width greater *and smaller* than "preferred width".  So it is
addition and subtraction.  If subtraction is allowed  then it is not
clear what intrinsic dimension means. As far as I understand
value of the 'width' property of child is not participating in
calculation of intrinsic width of its container in display:box.
That is quite different from traditional [CSS box model]
calculations in boxes that use intrinsic widths (e.g. floats and table 
cells).

In any case here is how that Mozilla url-box looks like with flex units:

<html>
  <head>
    <title>Mozilla URL box</title>
    <style>

      div#url-box
      {
        flow:horizontal;
        width:*; /* url box takes as much space as available  */
        border:1px solid blue;
        margin-left: 200px; /* emulation of other elementes on the 
left/right */
        margin-right: 100px;
      }
      div#url-box > div
      {
        height:*; /* span whole height of container*/
        border:1px solid red;
      }
      div#url-box > .favicon { width:24px;  }
      div#url-box > .url { width:*; min-width:48px; overflow-x: hidden; }
      div#url-box > .bookmark { width:24px;  }
      div#url-box > .dd-list { width:24px;  }

    </style>
  </head>
<body>

  <div id="toolbar">
    <div id="url-box">
      <div class="favicon">1</div>
      <div class="url">2</div>
      <div class="bookmark">3</div>
      <div class="dd-list">4</div>
    </div>
  </div>

</body>
</html>

Here
http://www.terrainformatica.com/w3/mozilla-url.png
is its rendering on different widths of view/window.

Key point here is:
div#url-box > div.url { width:*; min-width:48px; }

So div.url spans whole available width but not less than
min-width:48px;

(You can try the sample above in htmlayout/bin/browse.exe
from http://www.terrainformatica.com/htmlayout/HTMLayoutDemo.zip
Windows or Linux/Wine)

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Sunday, 9 May 2010 22:20:52 UTC