48 messages in org.w3.www-styleRe: Publishing the flexible box model
FromSent OnAttachments
L. David BaronJun 3, 2008 9:48 pm 
Alan GresleyJun 3, 2008 11:56 pm 
L. David BaronJun 4, 2008 12:22 am 
Anne van KesterenJun 4, 2008 1:12 am 
David HyattJun 4, 2008 1:46 pm 
Andrew FedonioukJun 4, 2008 5:50 pm 
L. David BaronJun 4, 2008 6:04 pm 
David HyattJun 4, 2008 6:54 pm 
Andrew FedonioukJun 4, 2008 8:09 pm.h
L. David BaronJun 4, 2008 10:23 pm 
L. David BaronJun 4, 2008 10:48 pm 
Andrew FedonioukJun 4, 2008 11:39 pm 
Andrew FedonioukJun 5, 2008 12:32 am 
Alan GresleyJun 5, 2008 12:34 am 
Robert O'CallahanJun 6, 2008 3:44 am 
fantasaiJun 6, 2008 8:12 am 
Andrew FedonioukJun 6, 2008 9:06 am 
Anne van KesterenJun 6, 2008 9:40 am 
Andrew FedonioukJun 6, 2008 9:54 am 
fantasaiJun 6, 2008 12:41 pm 
Andrew FedonioukJun 6, 2008 1:00 pm 
Robert O'CallahanJun 6, 2008 1:43 pm 
Andrew FedonioukJun 6, 2008 3:48 pm 
Robert O'CallahanJun 7, 2008 2:30 am 
Alan GresleyJun 7, 2008 7:24 am 
Alan GresleyJun 7, 2008 7:48 am 
Brad KemperJun 7, 2008 10:03 am 
Andrew FedonioukJun 7, 2008 1:34 pm 
Andrew FedonioukJun 7, 2008 2:46 pm 
Alan GresleyJun 7, 2008 8:56 pm 
Robert O'CallahanJun 9, 2008 5:48 pm 
Andrew FedonioukJun 9, 2008 7:22 pm 
Robert O'CallahanJun 9, 2008 7:59 pm 
L. David BaronJun 9, 2008 8:29 pm 
Andrew FedonioukJun 9, 2008 9:24 pm 
Andrew FedonioukJun 9, 2008 9:55 pm 
Robert O'CallahanJun 9, 2008 10:04 pm 
Andrew FedonioukJun 10, 2008 12:02 am 
Robert O'CallahanJun 10, 2008 1:46 am 
Alan GresleyJun 10, 2008 2:19 am 
Alan GresleyJun 10, 2008 2:35 am 
Alan GresleyJun 10, 2008 2:50 am 
Andrew FedonioukJun 10, 2008 12:58 pm 
Robert O'CallahanJun 10, 2008 2:34 pm 
Andrew FedonioukJun 10, 2008 4:07 pm 
Andrew FedonioukJun 10, 2008 4:30 pm 
Andrew FedonioukJun 10, 2008 4:39 pm 
Mike WilsonJun 12, 2008 4:46 am 
Actions with this message:
Paste this link in email or IM:
Paste this link in email or IM:
Atom feed for this thread
Paste this URL into your reader:
Subject:Re: Publishing the flexible box modelActions
From:Andrew Fedoniouk (ne@terrainformatica.com)
Date:Jun 4, 2008 5:50:07 pm
List:org.w3.www-style

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