5

Estou com uma dúvida sobre o flexbox e alinhamentos individuais dos filhos.

Gostaria da saber por que o justify-self não se funciona quando aplicado no filho de um pai com flex, porém o align-self funciona normalmente...

Mesmo usando justify-self: flex-end; no elemento filho ele não fica alinhado ao final do container pai com flex

Segue um exemplo prático, veja que o alinhamento horizontal não se aplica, porém o vertical funciona! Por que isso acontece?

Por que justify-self não funciona nos filhos de um pai com 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>

1 Resposta 1

4

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>

2
  • É isso ai mesmo Tio, obrigado!
    – hugocsl
    Commented 14/01/2019 às 16:39
  • Muito obrigado, eu ja sabia que dava pra resolver com o "margin-left/margin-right: auto;", mas jamais ia pensar que o justify-self é ignorado, pois era o que faria mais sentido pra mim no momento. Commented 14/10/2021 às 10:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .