Segundo a especificação na W3C, a propriedade justify-self
não se aplica a flexbox:
6.1. Inline/Main-Axis Alignment: the justify-self property
Applies to: block-level boxes, absolutely-positioned boxes, and grid items
E ainda diz no item 6.1.4 da documentação:
This property does not apply to flex items... (esta propriedade não se aplica a items flex)
E continua:
...because there is more than one item in the main axis. (porque há mais de um item no eixo principal)
Na documentação MDN:
In flexbox layouts, this property is ignored (more about alignment in Flexbox) (Em layouts flexbox, esta propriedade é ignorada...)
E nesta outra documentação sobre alinhamento em flexbox, diz o seguinte:
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.
Traduzindo (Google):
No eixo principal, o Flexbox lida com o nosso conteúdo como um grupo.
A quantidade de espaço necessária para dispor os itens é calculada e o
espaço restante fica disponível para distribuição. A propriedade
justify-content controla como esse espaço restante é usado. Ao setar
justify-content: flex-end e o espaço extra é colocado antes dos itens,
justify-content: espaço ao redor e é colocado em ambos os lados do
item nessa dimensão, etc.
Isso significa que uma propriedade justify-self não faz sentido no
Flexbox, pois estamos sempre lidando com a movimentação de todo o
grupo de itens.
No eixo cruzado auto-alinhamento faz sentido, já que potencialmente
temos espaço adicional no contêiner flexível nessa dimensão, no qual
um único item pode ser movido para o início e o fim.
No caso do seu exemplo, poderia alinhar o box à direita do contêiner usando 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>