Re: Publishing the flexible box model

L. David Baron wrote:
> I'd like to move forward with publishing the flexible box model as a
> working draft.  There have been specs floating around for years, but
> it's never been published on the TR page (despite, I believe, a
> minuted group resolution to do so at one point).
>
> I think the newest draft is
> http://xulplanet.com/ndeakin/xul/specs/flexbox.html .  (There's also
> an older draft at
> http://www.damowmow.com/temp/csswg/old/ui/flexbox.html .)
>   
That appears as a bit overcomplicated for such simple thing.
And yet it does not solve basic UI cases.

Consider following markup:

<body>
  <div>On the top</div>
  <div>On the bottom</div>
</body>

and we would like to "stick" second div to the bottom and first one to 
the top of the view. How would you
accomplish that with XUL flexes? Probably I have missed something but 
that is impossible with XUL flexes.

XUL flexes are about flexible dimensions but what about paddings and 
margins ?

Flexibility is really a length unit rather than some property.

Let's imagine that we have in CSS  following:
1) 'flow' attribute with the values: 'vertical' | 'horizontal'  | 
'vertical-flow' | 'horizontal-flow' | 'grid'
2) flex length units: N* where '*' is a name of the unit - flex.

So by having this task to style task above is trivial:

body
{
   height: 1*; /* takes full all available height of the container */
}
div:first-child
{
   margin-bottom: 1*; /* insert "spring" between first element and the 
rest */
}

Simple and human readable I would say.

Now if you want to position element in the middle of its container then 
you would do:

#in-the-middle { margin:1*; width:25%; height:25%; }

And if you want it to be slightly offset to the right/bottom you would 
define:

#almost-in-the-middle { margin: 2* 1* 1* 2*; width:25%; height:25%; }

That famous three column layout is also simple:

<body>
  <div>Left side bar</div>
  <div id="content">Content</div>
  <div>Right side bar</div>
</body>

And styles:

body {
   width: 1*;
   height: 1*;
   flow:horizontal; /* all children form single row */
}
body > div
{
    height:1*; /* all children have the same height equal to height of 
the row -
                       so to the tallest element  */
    width: max-intrinsic; /* or some other fixed size */
}
body > div#content
{
    width:1*; /* content spans space left from left and right sidebars 
in the body  */
}

So single attribute and one length unit will cover significantly more 
cases than what is defined
here: http://xulplanet.com/ndeakin/xul/specs/flexbox.html.

--
Andrew Fedoniouk.
http://terrainformatica.com

Received on Thursday, 5 June 2008 00:51:25 UTC