Re: [css3-flex] calc(flex) and concept of free space.

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Friday, June 04, 2010 9:39 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: "Brad Kemper" <brad.kemper@gmail.com>; "Zack Weinberg" 
<zweinberg@mozilla.com>; <www-style@w3.org>
Subject: Re: [css3-flex] calc(flex) and concept of free space.

>> Once again. You say that here:
>>
>> <div width:1000px padding-left:1fx
>>       box-sizing:border-box flow:vertical>
>>  <div #A width:calc(700px + 1fx) />
>>  <div #B width:2fx />
>> </div>
>>
>> div#A will get width 700px and
>> div#B will be 0px wide, correct?
>>
>> And what will be the width of content-box of outer
>> div then? Please note that it is box-sizing:border-box.
>>
>> Either both div#A and div#B should have zero widths
>> (if  content box width == 0)
>> or both of them should have 700px
>> (if  content box width == 700px).
>
> Oh!  I'm so sorry, I didn't notice that you'd switched to a vertical flow.
>
> In that case, both boxes are 700px wide, as is the content area of the
> parent.  That's specified in 6.2.1.2.
>

Still not correct, sorry :)

Here is how it renders:
http://terrainformatica.com/w3/sample-for-tab.png
Assumption is that width:auto is width:1fx in flex contexts.

Above is rendering of this document:

<html>
  <head>
     <style>
        #box { border:2px solid red; }
        .flexbox { border:2px solid green; }
        .child { border:2px solid blue; }
    </style>
  </head>
<body>
<div #box style="width:100px;">
  <div .flexbox style="margin-left:1*; flow:vertical">
    <div .child #A style="width: fx(1,70px)">A</div>
    <div .child #B style="width: fx(2)">B</div>
  </div>
</div>
</body>
</html>

I've already implemented additive flexes with use of fx function as:

fx(1) - 1fl of yours.
fx(1, 100px) - calc(1fl + 100px) of yours.

And here
http://terrainformatica.com/w3/fx-function-horizontal.png
is rendering of the document that uses min/max-intrinsic values with
the fx() function:

<html>
  <head>
    <title>fx() function test</title>
    <style>

      div.container
      {
        width: 600px;
        margin:10px;
        flow:horizontal;
        border:1px dotted red;
      }
      div.container > div:nth-child(1)
      {
        border:2px solid green;
        width: fx(1, 200px);
      }
      div.container > div:nth-child(2)
      {
        border:2px solid blue;
        width: fx(1, 400px);
      }
      div#2 > div
      {
        border:2px solid green;
        width: fx(1, min-intrinsic);
      }
      div#3 > div
      {
        border:2px solid blue;
        width: fx(1, max-intrinsic);
      }
    </style>
  </head>
<body>
  Case #1
  <div class="container">
    <div>first <code>fx(1,200px)</code></div>
    <div>second <code>fx(1,400px)</code></div>
  </div>
  Case #2, children <code>fx(1,min-intrinsic)</code>
  <div class="container" id="2">
    <div>first <code>fx(1,min-intrinsic)</code></div>
    <div>secondsecondsecond <code>fx(1,min-intrinsic)</code></div>
  </div>
  Case #3, children <code>fx(1,max-intrinsic)</code>
  <div class="container" id="3">
    <div>first <code>fx(1,max-intrinsic)</code></div>
    <div>secondsecondsecond <code>fx(1,max-intrinsic)</code></div>
  </div>
</body>
</html>

This week's build of the Sciter will have this on board.
Can be used for references as I am pretty confident that I did
this right. Thanks for you patience.

Solution I've proposed that uses single flow
property + flex units + fx() function is a superset of
XUL flexes ( http://www.w3.org/TR/css3-flexbox/ ) -
it allows to define everything of XUL flexes and allows
to do more. E.g. it covers templates and grids too (essential features).

Please consider to combine our two proposals into
single entity. It really makes sense.
Especially in shed of recent :ttb/:rtl flames.
{ direction:ttb; flow:horizontal; } is really what is
needed to support vertical writings. Nothing else is really needed.
I can write implementation of direction:ttb; pretty quickly to
prove this idea.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 5 June 2010 03:20:46 UTC