css - What is the purpose of flex-start and flex-end on justify-items and justify-self?

Question

From what I know, the justify-items and justify-self CSS properties are used in CSS Grid layouts, and don't have any effect in Flexbox layouts (unlike the similarly-named but different justify-content property). Indeed, MDN says in the docs for both justify-items and justify-self that

In flexbox layouts, this property is ignored

and has a whole section with the heading There is no justify-self in Flexbox on the Box Alignment in Flexbox page.

And yet, mysteriously, the justify-items docs list these two possible values:

justify-items: flex-start; /* Pack flex items from the start */
justify-items: flex-end;   /* Pack flex items from the end */

These values also show up as autocomplete suggestions in the developer tools of browsers like Chrome and Firefox if you start setting a justify-items or justify-self property.

Why do these values exist if justify-items and justify-self are ignored in Flexbox layouts? Are they specced? What do they do?

Answer 1

This is an error. The justify-items and justify-self properties do not apply in flexbox.

Consider your source of information: MDN Web Docs (formerly Mozilla Developer Network). This resource, although normally useful and reliable, nonetheless represents second hand information.

The CSS definitions on MDN pages are based on official W3C documentation. MDN contributors (people) read, filter and interpret W3C data for presentation on MDN. As a result, MDN info is subject to human error. That's the problem here.

If you go directly to the spec, you'll find the correct information:

7.1. Inline/Main-Axis Alignment: the justify-items property

This property specifies the default justify-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.

Okay. So let's go to justify-self.

6.1. Inline/Main-Axis Alignment: the justify-self property

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

As noted, justify-items and justify-self do not apply to flex items.

Also note that justify-items and justify-self are applicable to multiple box models, not just CSS Grid. For more details see the CSS Box Alignment Module specification.