Re: [css-flexbox] [css-align] inconsistent computed value for align-self: auto

On 07/23/2015 11:47 AM, Christian Biesinger wrote:
> Hi there,
>
> I noticed a difference in the definition of the computed value for
> align-self: auto
>
> Flexbox says:
> https://drafts.csswg.org/css-flexbox/#align-items-property
> Computed value: auto computes to parent’s align-items value; otherwise
> as specified
>
> Align says:
> The auto keyword computes to itself on absolutely-positioned elements [...]
> https://drafts.csswg.org/css-align/#justify-self-property (referenced
> by align-self:
> https://drafts.csswg.org/css-align/#align-self-property )
>
> This difference matters, because that means that for flexbox,
> align-self will compute to stretch by default and therefore stretch an
> abspos item. Whereas for align, it will compute to auto and not
> stretch.
>
> Could we change flexbox to match align?

Hi Christian,
Sorry for being confused initially. You're right, this is an
inconsistency, and we need to fix it. We just reviewed this
issue, and we're pretty convinced your proposed solution is
correct and we should make this change to Flexbox.

Our line of reasoning is as follows:

The two options are
   1) align-self on abspos is taken from the parent flex container
   2) align-self on abspos is not taken from the parent flex container

Flexbox currently specifies 1, whereas Alignment specifies 2.

There are two cases that matter here:
   A) Statically positioned abspos (no offsets specified)
   B) Not-statically positioned abspos (offsets specified)

The Alignment module specifies how the align-self/justify-self
properties apply to non-Flexbox layout modes, including abspos.

Currently class B is not affected by anything that happens in
Flexbox. But when Box Alignment is implemented, class B will
honor align-self/justify-self.

If, when this happens, we say that align-self/justify-self
take their values from the align-items/justify-items value
of their parent, then non-static abspos children of a flex
container (reasonably common case, I'd imagine) will suddenly
be honoring the align-items/justify-items values of their
flex container parents, where before they didn't. This will
likely break a lot of websites.

For this reason its important that we break the dependency
of the the abspos align-self values on their flex container
parent's align-items value, and so going with option #2 is
really the only safe way forward.

Note: Although some web pages might break on changing Flexbox
here, this is much less likely to be a problem since this is
a) not a common case and b) not interoperable yet.

~fantasai (and TJ)

Received on Tuesday, 1 December 2015 23:06:45 UTC