Itens de lugar - CSS-Tricks

A place-itemspropriedade em CSS é uma abreviação para as propriedades align-itemse justify-items, combinando-as em uma única declaração.

Um uso comum é fazer centralização horizontal e vertical com a grade:

.center-inside-of-me ( display: grid; place-items: center; )

Essas propriedades ganharam uso com a introdução dos layouts Flexbox e Grid, mas também são aplicadas a:

• Caixas de nível de bloco
• Caixas absolutamente posicionadas
• Posição estática de caixas posicionadas absolutamente
• Células da tabela

Sintaxe

A propriedade aceita valores duplos, o primeiro para align-itemse o segundo para justify-items. Para atualizar, align-itemsalinha o conteúdo ao longo do eixo vertical (coluna), enquanto o justify-itemsalinha ao longo do eixo horizontal (linha).

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

Isso é o mesmo que escrever:

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

Se apenas um valor for fornecido, ele definirá as duas propriedades. Por exemplo, este:

.item ( display: grid; place-items: start; )

... é o mesmo que escrever isto:

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

Valores Aceitos

O que torna essa propriedade interessante é que ela se comporta de maneira diferente com base no contexto em que é usada. Por exemplo, alguns valores se aplicam apenas ao Flexbox e não funcionarão em uma configuração de grade. Além disso, alguns valores se aplicam à align-itemspropriedade onde outros se aplicam ao justify-itemslado.

Além disso, os próprios valores podem ser considerados como caindo em vários tipos de alinhamento: contextual, distribuição, posicional (que se torna autoposicional se aplicado diretamente a um elemento filho no layout) e linha de base.

Rachel Andrew tem uma folha de dicas de alinhamento de caixa excelente que ajuda a ilustrar o efeito dos valores.

Valor	Modelo	Descrição
auto	Contextual	O valor se ajusta de acordo com o contexto do elemento. Ele usa o justify-itemsvalor do elemento pai do elemento. Se o pai não existir ou se for aplicado a um elemento posicionado com absolute, o valor se tornará normal.
normal	Contextual	Assume o comportamento padrão do contexto de layout onde é aplicado. • Layouts de nível de bloco: start • Posicionamento absoluto: startpara elementos absolutos substituídos e stretchpara todos os outros • Layouts de tabela: o valor é ignorado • Layouts de Flexbox: o valor é ignorado • Layouts de grade:, a stretchmenos que uma proporção de aspecto ou dimensionamento intrínseco seja usado onde se comporta gostarstart
stretch	Distribuição	Expande o elemento para ambas as bordas do contêiner verticalmente para align-itemse horizontalmente para justify-items.
start	Posicional	Todos os elementos são alinhados uns contra os outros na borda inicial (esquerda) do contêiner
end	Posicional	Todos os elementos são alinhados uns contra os outros na borda final (direita) do contêiner
center	Posicional	Os itens são alinhados um ao lado do outro em direção ao centro do contêiner
left	Posicional	Os itens são alinhados um ao lado do outro em direção ao lado esquerdo do contêiner. Se a propriedade não for paralela a um eixo padrão superior, direito, inferior e esquerdo, ela se comportará da mesma forma end.
right	Posicional	Os itens são alinhados lado a lado em direção ao lado direito do contêiner. Se a propriedade não for paralela a um eixo padrão superior, direito, inferior e esquerdo, ela se comportará da mesma forma start.
flex-start	Posicional	Um valor somente flexbox (que retorna a start) onde os itens são embalados em direção à borda inicial do contêiner.
flex-end	Posicional	Um valor somente flexbox (que retorna para end) onde os itens são embalados em direção à borda final do contêiner.
self-start	Auto-posicional	Permite que um item em um layout se alinhe na borda do contêiner com base em seu próprio lado inicial. Basicamente substitui o valor definido no pai.
self-end	Auto-posicional	Permite que um item em um layout se alinhe na borda do contêiner com base em seu próprio lado final, em vez de herdar o valor posicional do contêiner. Basicamente substitui o valor definido no pai.
first baseline last baseline	Linha de base	Alinha todos os elementos dentro de um grupo (ou seja, células em uma linha) combinando suas linhas de base de alinhamento. O padrão é firstse baselinefor usado sozinho.

Suporte para navegador

Esta propriedade está incluída na especificação Nível 3 do modelo de alinhamento de caixa CSS.

O suporte do navegador tornou-se bastante amplo e praticamente utilizável:

• Edge 79+ (transição pós-cromo)
• Firefox 45+
• Chrome 59+
• Safari 11+

Referências

• CSS Box Alignment Model Level 3 - A especificação oficial onde a place-itemspropriedade é inicialmente definida.
• Mozilla Developer Network - A documentação da equipe Mozilla.
• Folha de dicas de alinhamento de caixa - o esboço de Rachel Andrew é um recurso muito útil para compreender os termos de alinhamento e suas definições.