[css-flexbox][css-align] Support `justify-items` for flexbox containers (and `justify-self` for items)

nicoburns commented 1 year ago

Spec links:

Motivation

Alignment with CSS Grid is wonderfully symmetrical: you can align-items in one axis and justify-items in the other and this does exactly the same thing. Sadly the same cannot be said for Flexbox: align-items works nicely, but justify-items does nothing at all! I consider this undesirable for two reasons:

It's confusing for people to have to remember that it's -items in one axis and -content in the other, and it makes the naming scheme seem arbitrary to the point that I've observed that a lot of people seem to give up on learning the rules behind the alignment property naming entirely.
It means that place- shorthand syntax can't be used. Which would be particularly nice in order to be able to do things like place-items: center in order to center a single-child of a Flexbox node. Of course one can do this with Grid. But it would be nice if this capability was more universally avaialable.

Proposal

It occurs to me that could be fixed. Specifically for the case when justify-content is stretch (which is of course the default) we could enable the justify-items property to take effect.

Loirooriol commented 1 year ago

But you can use place-content: center for both axes. You will just need flex-wrap: wrap to enable align-content.

justify-items just sets the default justify-self of the children, and justify-self doesn't make sense for items that flow along a line like in flex.

yisibl commented 1 week ago

@dholbert answers the reasons behind this in detail here: https://stackoverflow.com/a/32569434/7983605

However, the css-align-3 specification says that justify-items applies to all elements, which should need clarification here?

I think the correct behavior would be:

justify-items Applies to: block-level boxes, absolutely-positioned boxes, and grid items

w3c / csswg-drafts