W3C home > Mailing lists > Public > www-style@w3.org > June 2008

Re: Publishing the flexible box model

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Fri, 06 Jun 2008 13:01:10 -0700
Message-ID: <48499786.90901@terrainformatica.com>
To: fantasai <fantasai.lists@inkedblade.net>
CC: Anne van Kesteren <annevk@opera.com>, robert@ocallahan.org, dbaron@dbaron.org, www-style@w3.org

fantasai wrote:
> Anne van Kesteren wrote:
>> On Fri, 06 Jun 2008 18:06:24 +0200, Andrew Fedoniouk 
>> <news@terrainformatica.com> wrote:
>>>>> How do flex-units interact with collapsing margins? E.g.
>>>>> <div style="overflow:auto; height:500px;">
>>>>>   <div style="height:1*; margin:1*;">Hello</div>
>>>>>   <div style="height:2*; margin:2*;">Kitty</div>
>>>>> </div>
>>>>> How does that work? Allocating flex height first and then 
>>>>> collapsing margins means the child divs don't fill the container. 
>>>>> But trying to collapse margins before resolving the flex heights 
>>>>> seems crazy.
>>>>  I would collapse the adjacent flex margins so that 1* collapsing with
>>>> 2* becomes a 2* gap. Then distribute the remaining space accordingly.
>>> Correct. margin:1* collapse in the same way as margin:1em;
>> What if one margin is in flex units and the other is 100px or something?
> I expect you'd keep two values for the margin: the fixed length, and the
> flex value. Collapsing two margins calc(2* + 100px) and calc(1* + 150px)
> would give you a collapsed margin of calc(2* + 150px). The 150px is 
> always
> applied, and the flex value absorbs its quota of additional space when 
> the
> available space is distributed.
By definition of the calc() function [1] flex units cannot be used there.
"The expression within the parethesis is computed at the same time as 
'em' lengths are computed"
And flexes evaluated after that - as a final step of the layout.

As I said in previous message for cases when  flex margin is collapsed 
with non-flex value
we can use non-flex value as a min constraint and flex value as a weight 
(flex per se).
So such margin will be computed according to the flex value but will be 
not-less than non-flex value.
That is simple and human understandable.

The same applies to min/max-width/height - flex values have no sense for 
these attributes
and flexes are used there they should evaluate to zero.

[1] http://www.w3.org/TR/css3-values/#calc

Andrew Fedoniouk.

Received on Friday, 6 June 2008 20:02:02 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:37 UTC