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.

Answer 2

The spec does actually dictate that these are valid justify-items and justify-self values. It lists the legal values of justify-items as:

normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]

and defines <self-position> as:

<self-position> = center | start | end | self-start | self-end |
       flex-start | flex-end

I'm not sure, but I speculate that these possible values got yanked in as possible values for justify-self and justify-items without much consideration simply by virtue of being part of the <self-position> category in the spec.

Regardless, the flex-start spec says:

flex-start

Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate.

When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.

(There's analogous wording for flex-end.)

If we're talking about the justify-items or justify-self properties, then, if they're not being ignored, we are guaranteed to not be in a flex formatting context, and thus it will always be the case that:

this value behaves as start.

We can see this in action in a simple Grid layout:

#grid {
    display: grid;
}
#item1 {
  justify-self: flex-start;
}
#item2 {
  justify-self: flex-end;
}

<div id="grid">
    <div id="item1">flex-start</div>
    <div id="item2">flex-end</div>
</div>

Of course, there's no good reason to use these over the less-confusing start and end values, so don't. But that's what they do, and why browsers support them.

MDN's documentation of what the values mean, on the other hand, is, at the time of writing, rather confusing and self-contradictory. I'll fix it in a moment, and hopefully by the time that you read this, it'll be clearer.