Atributo CSS justify-self

Definição e uso

A propriedade justify-self alinha itens de grade dentro da célula de grade ao longo da direção de linha.

Para páginas em inglês, a direção de linha é de esquerda para direita e a direção de bloco é para baixo.

Para que essa propriedade tenha qualquer efeito de alinhamento, o item de grade precisa deixar espaço disponível ao redor de si mesmo na direção de linha.

Dica:Para alinhar itens de grade na direção de bloco em vez da direção de linha, use Propriedade align-self ou Propriedade align-items Propriedades.

Veja também:

Tutorial CSS:CSS Grid

Tutorial CSS:Posicionamento CSS

Manual de referência CSS:Propriedade align-content

Manual de referência CSS:Propriedade align-items

Manual de referência CSS:Propriedade align-self

Manual de referência CSS:Propriedade direction

Manual de referência CSS:Propriedade grid

Manual de referência CSS:Propriedade grid-template-columns

Manual de referência CSS:Propriedade position

Manual de referência CSS:Propriedade writing-mode

Veja também:

Exemplo

Exemplo 1

Alinhe o item de grade à direita da célula de grade:

.red {
  display: grid;
  justify-self: right;
}

Experimente você mesmo

Exemplo 2: Comparação entre justify-self e justify-items

Defina o alinhamento relativo do contêiner como 'centrado' e o item de grade como 'alinhamento à direita'. O valor da propriedade 'right' prevalece:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Experimente você mesmo

Exemplo 3: Definir justify-self em itens de posição absoluta

Defina o alinhamento do item de posição absoluta para 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Experimente você mesmo

Exemplo 4: writing-mode

Quando o valor da propriedade writing-mode do elemento de contêiner de grade é definido como vertical-rl, a direção da linha é para baixo. O resultado é que o ponto de partida do contêiner se move para o topo da esquerda e o ponto final se move para o fundo da direita:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Experimente você mesmo

Exemplo 5: direction

Quando o atributo direction do elemento contêiner de grade é definido como 'rtl', a direção da linha é de direita para esquerda. O resultado é que o ponto de partida do contêiner se move da esquerda para a direita e o ponto final do contêiner se move da direita para a esquerda:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Experimente você mesmo

Sintaxe do CSS

justify-self: auto|normal|stretch|alinhamento posicional|alinhamento-de-transbordamento|alinhamento de linha de base|initial|inherit;

Valor da propriedade

Valor Descrição
auto Padrão. Herda o valor da propriedade justify-self do contêiner de grade.
normal

Depende do contexto do layout, mas é semelhante ao 'stretch' do item da grade na grade layout quando o tamanho não for definido.

Se o tamanho for definido, o comportamento do valor da propriedade é semelhante a 'start'.
stretch Se o inline-size (largura) não for definido, estica para preencher a célula da grade.
start Alinha o item no início da direção de linha.
left Alinha o item à esquerda.
center Alinha o item ao centro.
end Alinha o item no final da direção de linha.
right Alinha o item à direita.
alinhamento-de-transbordamento
  • 'safe' ajusta o alinhamento do item para 'start', se o conteúdo transbordar.
  • 'unsafe' mantém o valor de alinhamento, independentemente de o conteúdo do item transbordar.
alinhamento de linha de base O elemento alinha-se à linha de base do elemento pai.
initial Defina essa propriedade como seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: auto
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.justifySelf="right"

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0