Atributo CSS place-items

Página anterior place-content
Próxima página place-self

Definição e uso

Atributo A propriedade é usada para layout de grade e é a abreviação dos seguintes atributos:

align-items
Atributo

Se o atributo place-items tiver dois valores:

place-items: start center;

O valor do atributo align-items é 'start'
O valor do atributo justify-items é 'center'

Se o atributo place-items tiver apenas um valor:

place-items: end;

então os valores dos atributos align-items e justify-items são todos 'end'

Exemplo

Exemplo 1

Coloque cada elemento <div> no início da direção inline e da direção do bloco da célula da grade:

#container {
  place-items: start;
}

Experimente você mesmo

Exemplo 2: Modo de escrita

Quando a grade do contêiner writing-mode Quando a propriedade writing-mode é definida como 'vertical-rl', a posição final da direção do bloco move-se da parte inferior para a esquerda, e a posição final da direção inline move-se da direita para a parte inferior:

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 3: Layout flexível

Atributo A propriedade place-items no layout flexível, Atributo A propriedade place-items não se aplica ao layout flexível. Portanto, se usarAtributo O valor (ou seja, o segundo valor) será ignorado.

#wrapper {
  place-items: stretch end;
}

Experimente você mesmo

Sintaxe do CSS

place-items: normal legacy|value|initial|inherit;

Valor do atributo

Valor	Descrição
normal legacy	Padrão. O valor padrão do place-items do elemento. O valor padrão de align-items é 'normal', e o valor padrão de justify-items é 'legacy'.
baseline	O alinhamento do item está na linha de base do contêiner.
center	Alinhe o item ao centro da célula da grade.
end	Alinhe o item ao final da célula da grade.
start	Alinhe o item ao início da célula da grade.
stretch	Se o tamanho do item da grade não for definido, estique o item da grade para preencher o contêiner da grade.
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:	normal legacy
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.placeItems="stretch center"