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.

http://terrainformatica.com
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