Re: [css3-flexbox] absolutely positioned flex item should not have side effect on space distribution

On 07/23/2012 06:31 PM, fantasai wrote:
> On 07/11/2012 03:34 AM, John Hax wrote:
>> Absolutely positioned flex item should not have side effect on space distribution. Since space-* is about distribute spaces
>> evenly,
>>
>> A--B--C
>>
>> with B absolutely positioned, should be rendered as
>>
>> A--C
>>
>> , where B is positioned at the middle of A and C if all 'top'/'bottom'/'right'/'left' are 'auto'。
>
> I've summarized the state of the thread at
> http://wiki.csswg.org/topics/flex-abspos-placeholders

Ok, so the WG resolved rather conclusively that placeholders should not
have a side-effect on space distribution. That eliminates proposal C.

The resolution on what the static position should be was "it should be
determined like we do in normal block&inline flow", and now we have to
make that principle more precise.

Here are the rules for static position in CSS2.1:
   http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
   http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height

They refer to the position of a "hypothetical box", and then which
corner of the box is used depends on 'direction' (and, in CSS3,
'writing-mode'). The position of that box is, roughly, the position
it would have it were not positioned. Both 'clear' and 'float' are
also set to their initial values for this exercise.

Here's a proposal:

   # The hypothetical box used to calculate the static position [CSS21]
   # of an absolutely-positioned flex item corresponds to that of an
   # anonymous empty flex item whose main-axis position coincides with
   # the main-start edge of the subsequent real flex item on the flex line
   # and, being hypothetical, has no effect on flex layout.
   # If there is no subsequent real flex item, the hypothetical box's
   # main-axis position is that of a hypothetical last item on the flex
   # line, after any packing spaces that were introduced around any
   # previous real items due to ‘content-justify: space-around’.

In the general case, this places the item where it would have been
if it were not positioned, as concretely determined by the flex item
after it.

There are two edge cases:
   1. If the item appears at a wrap point. This text places it on the
      previous line. Removing "on the flex line" would place it on the
      next line.
   2. If the abspos is the last item on the line / in the container,
      and there is no subsequent flex item. This text places it after
      any justification spaces, but before any alignment spaces, so
      that there isn't a large separation between start-aligned flex
      items and a last-child abspos.

Overall the behavior should match that of the original LC spec (which
wraps consecutive abspos children into an anonymous flex item) except
that
   - When the anonymous item is not the last in the line, any space
     that would have been introduced after the item by ''space-around''
     or ''space-between'' is suppressed.
   - When the anonymous item is the last in the line, the half-spaces
     that would have been introduced around the item (for ''space-around'')
     or the full-space before the item (for ''space-between'') is suppressed.

This seems about as sensible as we can get. Thoughts? Better wordings? :)

~fantasai

Received on Wednesday, 25 July 2012 21:04:55 UTC