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

[nicoburns]

Spec links:

• https://www.w3.org/TR/css-flexbox-1/#alignment
• https://www.w3.org/TR/css-align-3/#self-alignment
• https://www.w3.org/TR/css-align-3/#default-alignment

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]

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]

@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

[benface]

Hey, I also wish justify-items and justify-self worked in Flexbox, but for a different purpose. I opened an issue about it: #11244

[Loirooriol]

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

@yisibl justify-items just sets the default justify-self of the children, and justify-self applies to "block-level boxes, absolutely-positioned boxes, and grid items". So:

justify-self	justify-items
block-level boxes	block containers
grid items	grid containers
absolutely-positioned boxes	all elements

Actually justify-self: auto behaves as normal when determining the actual position of an abspos, but it still uses the justify-items of the parent box when determining the static position. And the parent box could be whatever.