w3c / w3c/csswg-drafts

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

Open
#11,244 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-align-3 css-flexbox-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the flex-wrap and justify-content examples in the issue and the linked CodePen. Then review the CSS Flexbox and CSS Align behavior described by the issue for justify-items and justify-self; done means the proposed behavior has a clear Working Group decision and corresponding specification changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.