W3C home > Mailing lists > Public > www-style@w3.org > April 2015

Re: [css-flexbox] new abspos logic

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 9 Apr 2015 19:03:43 -0700
Message-ID: <CAAWBYDBhbCW0NAMgjEjFnadXT1DNiLYVjSekrX7YOMPKnMhr4A@mail.gmail.com>
To: Christian Biesinger <cbiesinger@google.com>
Cc: www-style list <www-style@w3.org>
On Wed, Apr 8, 2015 at 6:25 PM, Christian Biesinger
<cbiesinger@google.com> wrote:
> More questions on http://dev.w3.org/csswg/css-flexbox/#abspos-items -
>
> So the spec says:
> "In other words, the static position of an absolutely positioned child
> of a flex container is determined after flex layout by setting the
> child’s static-position rectangle to the flex container’s content box,
> then aligning the absolutely positioned child within this rectangle
> according to the justify-content value of the flex container and the
> align-self value of the child itself"
>
> I'm not completely sure how to interpret that especially in the case
> of auto margins. For example, given align-self: flex-end but margin:
> auto 0. Am I supposed to take a similar approach to the flex algorithm
> and ignore the flex-end here (because the margins centered it)...? Or
> should I ignore the margins and align it to flex-end because that
> matches this text more closely, even though it seems to contradict the
> previous paragraph a bit (which implies that only the static position
> is affected).
>
> In fact, a strict reading of the quoted paragraph implies that
> align-self/justify-content override other alignment methods (e.g.
> top:0 bottom:0)...
>
>
> This new method is way more complex than the previous one :(

It's actually quite simple; the problem is that what's currently in
the spec is an incomplete attempt to port the Alignment rules for
abspos into Flexbox, to avoid a normative dependency while Alignment
is immature.  Until I or fantasai fix it up, just look at Alignment,
which is quite simple:

* The t/r/b/l properties define the alignment container. It defaults
to the containing block, and they grow or shrink it.
* Margins get applied, taking up appropriate amounts of space. (Auto
margins potentially taking up all leftover space.)
* Finally, the alignment properties align the margin box in the
alignment container, putting it at start/end/center of each axis.

~TJ
Received on Friday, 10 April 2015 02:04:30 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC