Re: [css3-flexbox] miscellaneous comments on Chapter 4. Flex Items

On 07/04/2012 08:55 AM, Kang-Hao (Kenny) Lu wrote:
> (12/07/04 23:25), fantasai wrote:
>> On 07/03/2012 03:04 PM, Kang-Hao (Kenny) Lu wrote:
>>> == Technical Comments ==
>>>
>>>     # A flex item establishes a new formatting context for its contents.
>>>     # The type of this formatting context is determined by its
>>>     # ‘display’ value, as usual.
>>>
>>> A flex item of 'display: block'  should probably use the 'height'
>>> calculation in "10.6.7 'Auto' heights for block formatting context
>>> roots", but 10.6.7 says
>>>
>>>     # In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the
>>>     # height of an element that establishes a block formatting context is
>>>     # computed as follows:
>>>
>>> and who knows what "certain cases" means here (10.6.6 doesn't cover
>>> 'table-cell', for example). It's not clear to me if this is a CSS 2.1
>>> issue or css3-flexbox issue.
>>
>> Flex items aren't block-level elements, so those sections don't apply.
>> I've added
>>    # However, flex items are flex-level boxes, not block-level boxes;
>>    # they participate in their container's flex formatting context,
>>    # not in a block formatting context.
>> to the section to clarify this.
>
> Then which spec/section describes how to calculate the 'height' of a
> flex-level box? I thought the sentence
>
>    # In addition, if the element has any floating descendants whose
>    # bottom margin edge is below the element's bottom content edge, then
>    # the height is increased to include those edges. Only floats that
>    # participate in this block formatting context are taken into
>    # account, e.g., floats inside absolutely positioned descendants or
>    # other floats are not.
>
> in 10.6.7 applies here.

It does, because a flex item (that is block-inside) is a block container
that establishes a block formatting context. Therefore section 10.6.7
applies. Unfortunately CSS2.1 isn't super well-written here. :/ But it's
not a bug in Flexbox, it's a problem with how CSS2.1 is written.

A flex item that's not block-inside will have its height calculated
according to different rules, e.g. a table-inside flex item will have
its height calculated according to the rules for table heights, not
according to Chapter 10.

> The flex layout algorithm has
>
>    # 6 Resolve the flexible lengths of all the flex items to find their
>    # used main size, and determine their hypothetical cross size from
>    # this main size.
>
> . Is this "determine their hypothetical cross size from this main size"
> something that's not yet defined?

Would s/from/assuming/ solve the confusion here?

>>> Since CSS 2.1 by default doesn't propagate non-inherited properties to
>>> the table wrapper box. It should be mentioned that all properties that
>>> apply to flex items have this propagation.
>>
>> Hmm, I thought it was generally stated in 2.1 how anonymous boxes behave.
>
> 17.4 Tables in the visual formatting model
>
>    # The computed values of properties 'position', 'float', 'margin-*',
>    # 'top', 'right', 'bottom', and 'left' on the table element are used
>    # on the table wrapper box and not the table box; all other values of
>    # non-inheritable properties are used on the table box and not the
>    # table wrapper box.

Ah, I see where the confusion is. If a table element exists (i.e. it is not
generated due to anonymous box generation), the table wrapper box is not
an anonymous box. It is the principal box of the table element. The table
element generates two boxes, neither of which is anonymous because both are
associated with an element. (I believe the spec used to say that the table
wrapper box was an anonymous box, but that's been fixed since the 2010
edition.)

> I think my exact question is, for a case like
>
> <div style="display: flex">
>    <span>A</span>
>    <span style="position: absolute; order: -1;">B</span>
>    <span style="order: -1">C</span>
> </div>
>
> is the place holder before A or not? Or in other words, does the place
> holder has 'order: -1' or 'order: 0'?
>
> Your s/// seems to suggest 'order: 0' but I think the wording is still a
> bit vague. The hypothetical non-flex normal flow would be "A placeholder
> C" but I think you want "C A placeholder" or "placeholder C A".

I've filed this as a separate issue, since it's not just tightening up
prose, but an actual gap in the spec...
   http://dev.w3.org/csswg/css3-flexbox/issues-lc-2012#issue-17

>>>     | each child element (except those described below) of a flex
>>>     | container becomes a flex item.
>>
>> I don't know how to fix this to be any more precise than it is,
>> so I'm going to leave it. ("Element" is incorrect due to anonymous
>> table boxes.)
>
> "except those described below" would include absolutely positioned
> elements and mis-parented elements.

But it wouldn't include anonymous children.

~fantasai

Received on Monday, 9 July 2012 21:32:46 UTC