Re: Publishing the flexible box model

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 UTC