A propriedade CSS place-content

Página anterior perspective-origin
Próxima página place-items

Definição e uso

place-content A propriedade é usada para layout de caixa flexível (flexbox) e grade (grid), é uma abreviação das seguintes propriedades:

align-content
justify-content

Se a propriedade place-content tiver dois valores:

place-content: start center;

O valor da propriedade align-content é 'start'
O valor da propriedade justify-content é 'center'

Se a propriedade place-content tiver apenas um valor:

place-content: end;

Os valores das propriedades align-content e justify-content são 'end'

Exemplo

Exemplo 1

Alinhar a elasticidade no fundo do contêiner elástico e espaciar uniformemente os itens elásticos na direção horizontal:

#container {
  display: flex;
  place-content: end space-between;
}

Experimente você mesmo

Exemplo 2: Layout de grade

O espaço extra na direção do bloco é distribuído uniformemente ao redor de cada item da grade e os itens da grade estão alinhados no centro na direção das linhas：

#container {
  display: grid;
  place-content: space-around center;
}

Experimente você mesmo

Sintaxe do CSS

place-content: normal|value|initial|inherit;

Valor da Propriedade

Valor	Descrição
normal	Valor Padrão. Dependendo do contexto de layout. É equivalente a não definir valores para align-content e justify-content.
stretch	Grid: Se o tamanho não for definido, o item da grade será esticado para preencher o contêiner da grade. Flexbox: Se o tamanho do item flexível não for especificado na âncora cruzada, ele será esticado para preencher o contêiner flexível na âncora cruzada.
start	Ajusta os itens ao início do contêiner.
end	Ajusta os itens ao final do contêiner.
center	Ajusta os itens ao centro do contêiner.
space-between	Distribui o espaço disponível uniformemente ao longo dos dois eixos do contêiner, garantindo que o espaço entre os itens seja igual.
space-around	Distribui o espaço disponível uniformemente ao longo dos dois eixos do contêiner, garantindo que o espaço ao redor de cada item seja igual.
space-evenly	Distribui os itens uniformemente ao longo dos dois eixos do contêiner.
overflow-alignment	'safe'：Se o conteúdo exceder, ajusta o alinhamento do item para 'start'. 'unsafe'：Mantém o valor de alinhamento inalterado, independentemente de o conteúdo do item exceder.
initial	Defina essa propriedade para seu valor padrão. Veja também initial。
inherit	Herda essa propriedade do elemento pai. Veja também inherit。

Detalhes Técnicos

Valor Padrão:	normal
Herança:	Não
Animação:	Não suportado. Veja também：Propriedades Relacionadas a Animação。
Versão：	CSS3
Sintaxe do JavaScript：	object.style.placeContent="end space-around"