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 8:09:14 pm
List:org.w3.www-style
Attachments:

L. David Baron wrote:

On Wednesday 2008-06-04 17:50 -0700, Andrew Fedoniouk wrote:

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.

<body style="display:box; box-orient:vertical"> <div>On the top</div> <div style="box-flex: 1"></div> <!-- maybe needs 'display: box' ? --> <div>On the bottom</div> </body>

David, I think you already know why this is bad. div in the middle is not a solution if we speak about CSS.

Flexibility is really a length unit rather than some property.

No, since some layout models (traditional document layout) use one dimension as input and the other as output; you can only flex in a dimension that is input to the algorithm. In the existing CSS model, in many cases, there is no sensible height that is input to the algorithm (or, depending on how you look at it, multiple heights that might be of interest).

I am not sure I understand this: "you can *only* flex in a dimension that is input to the algorithm"

This <body><table width=100% height=100%></table></body> works perfectly well in Gecko as in other engines.

(In html/table percents behave as flex units)

So we already know how to flex things in both dimensions. That is why I am confused by your statement.

Flexes defined in the context of some container. Content is measured normally (position:static) and if there is a free space left then this free space is getting distributed among all lengths having flex units - parts competing for free space.

For inline-block elements container is a line box so this:

<p>Input:<input style="width:1*; height:1*" /><br/> Input #2:<input style="width:1*; height:1*" /></p>

will be rendered as:

|Input:[~~~~~~~input~~~~~~~~]| |Input #2:[~~~~~input~~~~~~~]|

Height if these inputs (height:1*) will be set to the height of correspondent line box.

For containers that have display-model:block-inside flexes of children are computed against width and height such containers. For children of flow:vertical containers:

width:auto, margin-left/right:auto are exactly width:1*, margin-left/right:1* - nothing new here.

and height:1* and/or margin-left/right:1* declares this block as competing for free space distribution.

If such container has declared height greater than intrinsic height of the content then it means that there is a free space. This space can be distributed among flexes.

Flex distribution algorithm is simple. I've attached implementation that I use ( libra.h ).

-- Andrew Fedoniouk.

http://terrainformatica.com