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 09:06:24 -0700
Message-ID: <48496080.4010505@terrainformatica.com>
To: fantasai <fantasai.lists@inkedblade.net>
CC: robert@ocallahan.org, dbaron@dbaron.org, www-style@w3.org

fantasai wrote:
> Robert O'Callahan wrote:
>> How do flex-units on inline elements interact with text-align:justify? 
>> E.g.
>> <div style="text-align:justify;">abcd efgh <span 
>> style="padding:1*">Hello</span> ijkl mnop</div>
>> where there's a soft line break after 'ijkl'. Do the spaces get the 
>> extra space, or does the flex get it?
> Flex should get it.

If line box contains element with flexes then free space will be
allocated to that element(s). Thus it will be no free space left
for text-align:justify distribution and so justification
can be omitted in this case.

>> How do vertical flex-units on inline elements interact with baseline 
>> alignment? E.g. if I have <img style="height:1*">, that's supposed to 
>> make the image height equal to the line-box height, but the image is 
>> supposed to be baseline-aligned so the line-box height has to be 
>> greater than the image height...
> No idea.

flex computation happens as a last step of layout process.
Line box that contains <img style="height:1*"> will be computed
as if no height:1* defined for the img (as if height:<undefined>).
On the final step that image will get height:1* computed to
the value equal to height of the line-box minus vertical paddings, 
borders and margins of the image.

>> 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;

For flow:vertical (standard DIV layout) vertical margins are getting 
collapsed. For flow:horizontal - horizontal margins are collapsed.

>> These are just a few of the questions that would have to be resolved. 
>> A great deal of the CSS spec would have to be carefully analyzed for 
>> interactions with flex-units, and many parts of the spec will become 
>> even more complicated.
> I do agree with Andrew that it should be possible to flex margins.

I've implemented flex units already and did not find any conflicts
with existing CSS mechanisms. The only problem as I said earlier is
interaction with floats - flex computation happens after layout of
floats. For inline elements with flexes that is no problem.
But for the case:
<p style="margin:* 0">Here is float image <img align="right"/></p>
we will get bad results.

The only solution I can see is to declare blocks with flexes
or in flex contexts as layout roots so floats will be layouted
inside their content boxes (as in table cells currently).


In principle flex length units make obsolete following
proposed features of CSS3:
   1) calc() thing is not needed as in most cases it can be replaced
      by just 1* value. With min/max-width adjustment if needed.
   2) box-sizing will be also not needed.

These two things are doubtful in any case so if it would
be better if we will forget about them completely.

Andrew Fedoniouk.

Received on Friday, 6 June 2008 16:07:13 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:07 GMT