[css-align] Define align-content: baseline for flex containers

[dholbert]

Spec link: https://drafts.csswg.org/css-align/#baseline-align-content

This text has multiple references to the item's "inline axis" -- e.g.

Flex Items:
A flex item participates in first (last) baseline content-alignment in its flex line if its computed align-content is first baseline (last baseline) and its inline axis is parallel to the main axis.
Grid Items:
A grid item participates in first (last) baseline content-alignment in its startmost (endmost) row or column (whichever is parallel to its inline axis) and if its computed align-content is first baseline (last baseline).

To me, this reliance on the item's "inline axis" indicates that there's an assumption that "align-content" will always be having an impact that is orthogonal to the item's inline axis (i.e. shifting its contents up or down, in a horizontal-tb writing mode).

However: if the item happens to be a flex container with flex-direction:column, then align-content operates in the opposite axis from what it would normally operate in. (i.e. it would shift contents right or left, in a horizontal-tb writing mode)

So it seems odd that there's a dependency on the element's inline axis in particular -- I think perhaps this spec text really means to say "inline axis [or main axis, if the item is a flex container]"?

Caveat: I haven't implemented this align-content:baseline behavior yet, for flexbox -- I'm just trying to wrap my mind around how it should work.

CC @tabatkins @fantasai

[fantasai]

@dholbert align-content on a flex item applies to content inside the flex item according to the flex item’s own writing mode. If its inline axis is parallel to the cross axis, then there are no other items in its alignment context, so it can't perform baseline alignment.

Let me know if that's starting to make sense or if I should try to explain it a different way? :)

[dholbert]

Let me compare two examples to make my thoughts a bit clearer.

SCENARIO 1:

  <flexcontainer id="a">
    <flexcontainer id="b" style="align-content: baseline">

Here, #a will think that its flex item #b should participate in baseline content alignment within its flex line, because the flex item (#b) has align-content: baseline and its inline axis is parallel to the flex container #a's main axis. So when #a is positioning/sizing items in its flex line, it may effectively give #b a bit of extra "virtual padding-top", so that it's aligned as part of that flex line's baseline group.

Thoughts: It makes some sense for align-content to have this kind of effect, because in this scenario, align-content is supposed to be doing some vertical alignment on the contents of #b. That's the axis that it operates in.

SCENARIO 2: consider an example like this, where I've simply added flex-direction:column:

  <flexcontainer id="a">
    <flexcontainer id="b" style="align-content: baseline; flex-direction: column">

Here, #a might still think it should apply some extra padding-top, because the same logic applies. But in this case, it's kinda nonsensical because here, #b's align-content axis is really the horizontal axis.

[fantasai]

Ah, OK. The flex item is also a flex container. align-content on a flex container uses the flex lines (not the flex items) as its alignment subject. Flexbox didn't allow align-content to take a baseline value, so there's no definition for that. We'd have to create a definition for how that could work.

[fantasai]

I think my advice on this point for now would be to pretend it doesn't apply and treat it as start. :) We'll work on drafting a spec for it later. The most important case would really be to get align-content working on block container flex items.

[dholbert]

Ah, OK. The flex item is also a flex container

Right, yeah. (Or hypothetically if the grid item were a flex container -- same issue there.)

I think my advice on this point for now would be to pretend it doesn't apply and treat it as start

OK! That sounds roughly appropriate, yeah.

[tabatkins]

(We filed #3052 to track an aspect of this discussion.)

[tabatkins]

Ah, spotted the issue with your "Scenario 2" - it turns out that we missed that column flexboxes just plain can't do baseline content-alignment, because the relevant axises aren't lined up. Pushed a commit to say that.

[tabatkins]

@dholbert So, we think the above commit actually resolves your issue. Is that right?

We thought you were asking to have align-content:baseline actually defined for Flexbox, but that's already defined by Align, right? (modulo the #3052 issue)

[dholbert]

Ah, spotted the issue with your "Scenario 2" - it turns out that we missed that column flexboxes just plain can't do baseline content-alignment, because the relevant axises aren't lined up.

Right, yeah.

@dholbert So, we think the above commit actually resolves your issue. Is that right?

I think so, yeah! Thanks.

We thought you were asking to have align-content:baseline actually defined for Flexbox, but that's already defined by Align, right? (modulo the #3052 issue)

Yeah, sorry -- my github-issue-title here was perhaps a bit too broad. Agreed that it's appropriately defined (& now defined more clearly) in Align. My point here was that flexbox in particular had some special cases (column-oriented flexboxes) that didn't mesh with the general definition, but it seems fine now.

I'll mark this as "closed" (fixed by your commit above).