Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-align] Inconsistent fallback alignments for space-between and space-around/evenly #10154

Closed
Loirooriol opened this issue Mar 28, 2024 · 4 comments
Closed

[css-align] Inconsistent fallback alignments for space-between and space-around/evenly #10154

Loirooriol opened this issue Mar 28, 2024 · 4 comments
Labels
Closed Accepted by CSSWG Resolution css-align-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

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>
@Loirooriol Loirooriol added the css-align-3 Current Work label Mar 28, 2024
@fantasai
Copy link
Collaborator

fantasai commented Apr 1, 2024

There's two effects that this controls:

  • What happens with only one item.
  • What happens with overflow.

Wrt rationale:

  • Overflow on these should be safe, so they should probably all be safe. Maybe space-between needs to change here.
  • space-around and space-evenly reasonably devolve into centering.
  • space-between positions the first item flush, so it was decided to use start fallback alignment. IIRC at the time of discussion there wasn't a distinction between flex-start and start so we didn't debate that point. I think this is also why we overlooked whether it was safe or not...

Proposal: Update space-between fallback from flex-start to safe flex-start.

@nicoburns
Copy link

IMO the weird/confusing thing in the spec is space-around and space-evenly using the concept of fallback to specify their centering behaviour. I feel like the centering behaviour of space-around and space-evenly (and the start-like behaviour of space-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:

The alignment subjects are evenly distributed in the alignment container, with a half-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same, and the spacing before the first and after the last alignment subject is half the size of the other spacing.

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 start or flex-start (I guess it really needs to be start in order to be truly safe?).

@nicoburns nicoburns mentioned this issue Apr 7, 2024
Closed
@css-meeting-bot
Copy link
Member

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"

@mozilla-apprentice mozilla-apprentice mentioned this issue Apr 10, 2024
Closed
@chromium-helper chromium-helper mentioned this issue Apr 10, 2024
Closed
This was referenced Apr 10, 2024
Merged
Merged
@fantasai
Copy link
Collaborator

Flexbox spec also needs updating here.

tabatkins added a commit that referenced this issue Aug 9, 2024
@tabatkins
[css-align-3] Make space-between's fallback safe, per WG resolution. #…
147200a 
…10154
fantasai added a commit that referenced this issue Aug 9, 2024
@fantasai
[css-flexbox-1] Make space-* fallback to safe alignment #10154
b6c01a4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted by CSSWG Resolution css-align-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tabatkins @fantasai @nicoburns @Loirooriol @css-meeting-bot