In Flexbox why does Justify-self not work on the children of a parent with display:flex?

Question

I have a question about flexbox and individual child alignments.

I wonder why the justify-self does not work when applied on the child of a parent with flex, however the align-self works normally...

Even using justify-self: flex-end; in the child element it is not aligned at the end of the container father with flex

Follow a practical example, see that the horizontal alignment does not apply, but the vertical one works! Why does this happen?

Why justify-self does not work on the children of a father with display:flex?

html, body {
    display: flex;
}
.container {
    display: flex;
    background-color: silver;
    border: 1px solid #000;
    width: 200px;
    height: 100px;
}
.box {
    width: 50px;
    height: 50px;
    background-color: red;
}
.box.x {
    justify-self: flex-end;
}
.box.y {
    align-self: center;
}

<div class="container">
    <div class="box x"></div>
</div>
<div class="container">
    <div class="box y"></div>
</div>

Answer 1

According to the specification in W3C, the property justify-self does not apply to flexbox:

6.1. Inline/Main-Axis Alignment: the Justify-self Property

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

And it says so on the item 6.1.4 of documentation:

This Property does not apply to flex items... (this property does not apply to flex items)

And continues:

...because there is more than one item in the main Axis. (because there is more than one item on the main axis)

In the MDN documentation:

In flexbox layouts, this Property is Ignored (more about Alignment in Flexbox) (In flexbox layouts, this property is ignored...)

And in this other documentation on flexbox alignment, says the following:

On the main Axis Flexbox Deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for Distribution. The Justify-content Property Controls how that leftover space is used. Set Justify-content: flex-end and the extra space is placed before the items, Justify-content: space-Around and it is placed either side of the item in that Dimension, etc.

This Means that a Justify-self Property does not make sense in Flexbox as we are Always dealing with Moving the entire group of items Around.

On the cross Axis align-self makes sense as we potentially have Additional space in the flex container in that Dimension, in which a single item can be Moved to the start and end.

Translating):

On the main axis, Flexbox handles our content as a group. The amount of space required to dispose of the items is calculated and the remaining space is available for distribution. The property Justify-content controls how this remaining space is used. When setting Justify-content: flex-end and extra space is placed before the items, Justify-content: space around and is placed on both sides of the item in that dimension, etc.

It means that a Justify-self property makes no sense in Flexbox, because we are always dealing with the movement of the whole item group.

On the self-aligning cross axis makes sense, as potentially we have additional space in the flexible container in this dimension, in which a single item can be moved to the beginning and the end.

In the case of your example, you could align the box to the right of the container using margin-left: auto:

html, body {
    display: flex;
}
.container {
    display: flex;
    background-color: silver;
    border: 1px solid #000;
    width: 200px;
    height: 100px;
}
.box {
    width: 50px;
    height: 50px;
    background-color: red;
}
.box.x {
    /* justify-self: flex-end; */
    margin-left: auto;
}
.box.y {
    align-self: center;
}

<div class="container">
    <div class="box x"></div>
</div>
<div class="container">
    <div class="box y"></div>
</div>