Repository navigation
[css-align] Inconsistent fallback alignments for space-between and space-around/evenly #10154
Description
https://drafts.csswg.org/css-align/#distribution-values
| Alignment | Fallback |
|---|---|
space-between |
flex-start |
space-around |
safe center |
space-evenly |
safe center |
As per https://drafts.csswg.org/css-align/#valdef-overflow-position-safe, safe center will basically behave as start, which differs from the flex-start of space-between.
Blink seems to treat all of them as flex-start
<!DOCTYPE html>
<style>
.flex { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; height: 100px; width: 100px; border: solid; margin: 30px; }
.flex::before { content: ""; height:125%; width: 125%; flex-shrink: 0; z-index: -1; background: cyan; }
</style>
<div class="flex" style="place-content: space-between"></div>
<div class="flex" style="place-content: space-around"></div>
<div class="flex" style="place-content: space-evenly"></div>
Activity
fantasai commentedon Apr 1, 2024
There's two effects that this controls:
Wrt rationale:
safe. Maybespace-betweenneeds to change here.space-aroundandspace-evenlyreasonably devolve into centering.space-betweenpositions the first item flush, so it was decided to use start fallback alignment. IIRC at the time of discussion there wasn't a distinction betweenflex-startandstartso we didn't debate that point. I think this is also why we overlooked whether it was safe or not...Proposal: Update
space-betweenfallback fromflex-starttosafe flex-start.nicoburns commentedon Apr 7, 2024
IMO the weird/confusing thing in the spec is
space-aroundandspace-evenlyusing the concept of fallback to specify their centering behaviour. I feel like the centering behaviour ofspace-aroundandspace-evenly(and the start-like behaviour ofspace-between) in the case of a single node should just be part of the definition of those layout modes.For example the spec for
space-around:Could be adjusted to say something like: "If there is only a single alignment subject then available space is evenly distributed at either end". Or the ratio formula for dividing the available space (1:2:2:2:1) could be stated more explicitly in a way that is still works in the case that there are no spaces between alignment subjects.
Then the concept of fallback would only be required in the case of overflow and would be much more straightforward: just specifying a fallback to either
startorflex-start(I guess it really needs to bestartin order to be truly safe?).css-meeting-bot commentedon Apr 10, 2024
The CSS Working Group just discussed
[css-align] Inconsistent fallback alignments for space-between and space-around/evenly, and agreed to the following:RESOLVED: Update the fallback for space-between to add "safe"The full IRC log of that discussion
<TabAtkins> fantasai: this is about fallback behavior of the content-distribution keywords: space-between/around/evently<TabAtkins> fantasai: Oriol pointed out the inconsistentcy, around/evenly do "safe" alignment
<TabAtkins> fantasai: So if the lone item overflows, the item won't overflow the start edge, to avoid clipping
<TabAtkins> fantasai: but -between doesn't have that
<TabAtkins> fantasai: So proposal is to change the fallback from "flex-start" to "safe flex-start"
<TabAtkins> TabAtkins: [explains the issue]
<TabAtkins> fantasai: start doesnt' overflow into unscrollable region
<TabAtkins> fantasai: but flex-start *can* if you reverse a flexbox, then it's end-aligning
<TabAtkins> dholbert: This makes sense to me
<TabAtkins> chrishtr: Do you think there's a compat risk?
<TabAtkins> fantasai: I doubt it. If you're using these keywords you expect yoru content to have mutliple items, and the items smaller than the CB.
<TabAtkins> dholbert: Agree, "safe" coming into play seems rare here, so it seems nice from a consistency perspective, and when it *does* activate it's an improvement in behavior
<TabAtkins> chrishtr: okay
<dbaron> This is changing the failure fallback case inside of a different failure fallback case :-)
<TabAtkins> iank_: We've taken some compat pain for these properties, it would be nice to have the other browsers get some safety here
<iank_> looks good
<TabAtkins> failure 1: you only have one item instead of multiple. failure 2: that item is bigger than the containing block. (and qualifier 3: you're in a reverse flexbox)
<TabAtkins> proposed resolution: Update the fallback for space-between to add "safe"
<TabAtkins> RESOLVED: Update the fallback for space-between to add "safe"
fantasai commentedon Jul 23, 2024
Flexbox spec also needs updating here.
[css-align-3] Make space-between's fallback safe, per WG resolution. #…
[css-flexbox-1] Make space-* fallback to safe alignment #10154