Re: Publishing the flexible box model

On Tue, Jun 10, 2008 at 4:24 PM, Andrew Fedoniouk <news@terrainformatica.com>
wrote:

> Robert O'Callahan wrote:
>
>> On Tue, Jun 10, 2008 at 2:23 PM, Andrew Fedoniouk <
>> news@terrainformatica.com <mailto:news@terrainformatica.com>> wrote:
>>
>>    Robert O'Callahan wrote:
>>
>>        OK but how is this going to interact with the rules here, for
>>        example:
>>        http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
>>
>>
>>    I see no problems there either.
>>    In most cases 'shrink-to-fit' is 1* exactly.
>>    Practically in all cases 'auto' value can be replaced
>>    by 1* value.
>>    1* is a mathematically correct way of saying 'auto' :)
>>
>>
>> That doesn't answer my question. You need to extend the rules in that
>> section to describe what happens when flexunits (not just "1*") appear for
>> margins, padding or content.
>>
>
> For
>  flow:vertical;
>  box-sizing:content-box; ( default value )
>
> vertical margins, paddings, content and borders in flex units
> share the same free space. So for style:
>
> div.inner { padding:1* 0; }
>
> This markup
> <div style="height:YYpx; flow:vertical">
>  <div class=inner>First</div>
>  <div class=inner>Second</div>
> </div>
>
> will be rendered as
>
> |------------
> |
> |First
> |
> |
> |Second
> |
> |------------
>
> Rule is simple: free space is distributed among all lengths
> in the direction in the block that establishes box with free space.
>

What does that have to do with absolute positioning and
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width ?


>    Consider this:
>>
>>    <div style="overflow:hidden; width:xx; height:yy">
>>     <img align=left id=first />
>>     <p flex=1>...</p>
>>     <img align=left id=second />
>>    </div>
>>
>>    You will have *exactly* the same kind of problems.
>>
>>
>> No. The flex on the <p> is ignored because the container is not a flexbox.
>> If the container was a flexbox, then the <img> elements would not float.
>>
>
> Exactly the same thing as with flex units. Just replace 'flexbox' by
> 'flow'.


OK. So 'flow' creates something like a flexbox. One difference is that all
features of CSS are available inside 'flow' except for features that cause
trouble, like floats, which you disable when you discover they cause
problems. But the only features available inside flexbox are ones we
explicitly allow. Another difference is that you have to specify how 'flow'
interacts with the various display types, whereas since flexboxes are their
own display type that isn't an issue.

A few more questions about flex-units:

Does 'flow' apply to inline elements? If so, what does 'flow:vertical' do on
an inline element?

How do flexunits work on inline elements that break across multiple lines?
e.g
<span style="font-size:50px;">Foo</span> <span
style="padding-top:1*">A<br>B<br>C</span> <span
style="font-size:80px;">qux</span>
Which line box(es) are used to determine the padding? Does each line of the
<span> actually get a different padding?

How do flexunits interact with absolute positioning and auto top/left? Is
the hypothetical position for the content computed taking flexunit
margins/padding on the content into account?

Rob
-- 
"He was pierced for our transgressions, he was crushed for our iniquities;
the punishment that brought us peace was upon him, and by his wounds we are
healed. We all, like sheep, have gone astray, each of us has turned to his
own way; and the LORD has laid on him the iniquity of us all." [Isaiah
53:5-6]