Itens justificados - CSS-Tricks

Anonim

A justify-itemspropriedade é uma subpropriedade do Módulo CSS Box Alignment que basicamente controla o alinhamento dos itens da grade dentro de seu escopo.

.element ( justify-items: center; )

justify-itemsalinha os itens da grade ao longo do eixo da linha (em linha). Especificamente, esta propriedade permite que você defina o alinhamento de itens dentro de um contêiner de grade (não a própria grade) em uma posição específica (por exemplo start, centere end) ou com um comportamento (por exemplo, autoou stretch).

Quando justify-itemsé usado, também define o justify-selfvalor padrão para todos os itens da grade, embora isso possa ser sobrescrito no nível do filho usando a justify-selfpropriedade no próprio filho.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Sintaxe

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Valor inicial: legacy
  • Aplica-se a: todos os elementos
  • Herdado: não
  • Valor calculado: conforme especificado
  • Tipo de animação: discreto

Valores

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Valores básicos de palavras-chave

  • stretch: Valor padrão. Alinha os itens para preencher toda a largura da célula do item da grade
  • auto: igual ao valor de justify-itemsin parent.
  • normal: Embora possamos ver justify-itemsusado com mais frequência em um layout de grade, é tecnicamente para qualquer alinhamento de caixa e normalsignifica coisas diferentes em diferentes contextos de layout, incluindo:
    • layouts de nível de bloco ( start)
    • layouts de grade stretch
    • flexbox (ignorado)
    • células da tabela (ignorado)
    • layouts absolutamente posicionados ( start)
    • caixas absolutamente posicionadas ( stretch)
    • substituiu caixas absolutamente posicionadas ( start)
.container ( justify-items: stretch; )

Valores de alinhamento de linha de base

Isso alinha a linha de base de alinhamento da primeira ou última linha de base definida com a linha de base correspondente de seu contexto de alinhamento.

.container ( justify-items: baseline; )
  • O alinhamento de fallback para first baselineé safe start.
  • O alinhamento de fallback para last baselineé safe end.
  • baselinecorresponde a first baselinequando usado sozinho

Na demonstração abaixo (melhor visualizada no Firefox), vemos como os elementos se alinham com a linha de base de uma grade baseada no eixo principal.

Valores de alinhamento posicional

  • start: Alinha os itens com a borda inicial do contêiner de alinhamento
  • end: Alinha os itens com o contêiner de alinhamento da borda final
  • center: Alinha os itens no centro do contêiner de alinhamento
  • left: Alinha os itens à esquerda do contêiner de alinhamento
  • right: Alinha os itens à direita do contêiner de alinhamento
  • self-start: Alinha os itens no início de cada célula do item da grade
  • self-end: Alinha itens no final de cada célula de item de grade
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Valores de alinhamento de estouro

A propriedade overflow determina como exibirá o conteúdo da grade quando o conteúdo exceder os limites da grade. Portanto, quando o conteúdo é maior do que o contêiner de alinhamento, isso resultará em estouro, o que pode levar à perda de dados. Para evitar isso, podemos usar o safevalor que informa ao navegador para alterar o alinhamento para que não haja perda de dados.

  • safe : Se um item estourar o recipiente de alinhamento, o startmodo é usado.
  • unsafe : O valor de alinhamento é mantido como está, independentemente do tamanho do item ou do recipiente de alinhamento.

Valores legados

  • legacy : Quando usada com uma palavra-chave direcional (por exemplo right, leftou center), essa palavra-chave é passada para os descendentes herdarem. Mas se o descendente declara justify-self: auto;então legacyé ignorado, mas ainda respeita a palavra-chave direcional. O valor é calculado para o valor herdado se nenhuma palavra-chave direcional for fornecida. Caso contrário, ele calcula normal.

Demo

Mais Informações

  • Módulo de alinhamento de caixa CSS nível 3 (rascunho de trabalho)
  • Um guia completo para grade
  • Um guia completo para Flexbox

Suporte de navegador

O suporte do navegador justify-itemsfunciona em toda a gama, pois é usado em vários contextos de layout, como grade, flexbox, células de tabela. Mas, em geral, se grid e flexbox são suportados, então você pode assumir que justify-itemstambém.

Layout de grade

IE Beira Raposa de fogo cromada Safári Ópera
Não 16+ Mais de 45 57+ 10,1+ 44+
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mobile
81+ Mais de 45 81+ 10,1+ 59+
Fonte: caniuse

Layout flexível

IE Beira Raposa de fogo cromada Safári Ópera
Não 12+ 20+ 52+ 9+ 12,1+
Android Chrome Android Firefox Navegador Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12,1+
Fonte: caniuse

Propriedades relacionadas

Almanaque em 27 de outubro de 2019

alinhar-itens

Geoff Graham