[css-flexbox][css-align] Proposal: justify-items and justify-self to align flex items that are alone on their line

[benface]

Ok, I have to say that this is a very rough/raw idea, but the problem it would solve is a real one: there's currently no way to have a flex container with justify-content: space-between and flex-wrap: wrap and control the horizontal alignment ("justification"?) of the items that end up alone on their line (they are always start-aligned, at least in LTR). A workaround exists to make them end-aligned, but I couldn't find any to make them center-aligned. What if it was as simple as this?

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-items: center; /* <-- this currently doesn't work; `justify-items` is ignored in flex layout */
}

Or, a more concrete example where we only want to center-align a specific item when it wraps:

<footer style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;">
  <nav>Nav content here</nav>
  <div>Social links here</div>
  <p style="justify-self: center; text-align: center;">
    Copyright © 2024 Example Company
  </p>
</footer>

Check out that example on Codepen. There is currently no way to center-align the copyright notice without using a media query, which is just sad.

[Loirooriol]

It seems to me what you actually want is justify-content: space-between but with a fallback alignment of safe center instead of safe flex-start. Try space-around, which has your desired fallback, it works quite well (but of course you get spacing on the sides).

[benface]

It seems to me what you actually want is justify-content: space-between but with a fallback alignment of safe center instead of safe flex-start.

That may well be what I want (though I think what I proposed is more powerful because it would allow setting the "fallback alignment" of individual items). In any case, is it even possible to change the fallback alignment? Is there a proposal for it?

Try space-around, which has your desired fallback, it works quite well (but of course you get spacing on the sides).

Yes, I'm familiar with that option. Unfortunately, the spacing on the sides is a dealbreaker.

[Loirooriol]

I think what I proposed is more powerful

Well, yes, but it seems very weird if it only applies when there is no other item on the line.

is it even possible to change the fallback alignment? Is there a proposal for it?

I don't know, but it seems reasonable and straightforward, e.g justify-content: space-between, safe center.

Could also be useful to e.g. choose unsafe fallbacks.

[yisibl]

I think you need a new container query that detects if flex-wrap: wrap is triggered.

[benface]

I think you need a new container query that detects if flex-wrap: wrap is triggered.

How can a container query detect if flex-wrap: wrap is triggered? If you're suggesting I just figure out the exact container width at which it happens and then hardcode that in the container query, that's not a good solution for me. :P

[Loirooriol]

Filed #11259 about choosing the fallback alignment.