A propriedade CSS place-self

Página anterior place-items
Próxima página pointer-events

Definição e uso

place-self a propriedade é usada para alinhar o item da grade sozinho e é uma abreviação das seguintes propriedades:

align-self
justify-self

se a propriedade place-self tiver dois valores:

place-self: start center;

o valor da propriedade align-self é 'start'
o valor da propriedade justify-self é 'center'

se a propriedade place-self tiver apenas um valor:

place-self: end;

então os valores das propriedades align-self e justify-self são 'end'

Exemplo

Exemplo 1

Alinhar o item da grade sozinho em ambas as direções do bloco e do inline até a posição final:

#myDiv {
  place-self: end;
}

Experimente você mesmo

Exemplo 2: Modo de escrita

quando o elemento <div> writing-mode Quando o valor da propriedade 'vertical-rl' é definido, a célula da grade na posição final do bloco se move do fundo para a esquerda, e na posição final do inline se move da direita para o fundo:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

Experimente você mesmo

Exemplo 3: Layout flexível

place-self A propriedade também pode ser usada em itens do layout flexível, mas justify-self O segundo valor será ignorado, pois não é aplicável ao layout flexível:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

Experimente você mesmo

Sintaxe do CSS

place-self: auto|value|initial|inherit;

Valor da propriedade

Valor	Descrição
auto	Padrão. O valor padrão do place-self do elemento.
normal	Depende do contexto do layout, mas para itens da grade que não tiverem tamanho definido, seu comportamento é semelhante ao 'stretch' do layout da grade. Se o tamanho for definido, o comportamento do valor da propriedade é semelhante a 'start'.
stretch	Se o tamanho não for definido, estica para preencher a célula da grade.
start	Alinha o item ao início na direção da linha e da coluna.
left	Alinha o item à esquerda na direção da linha, como valor da propriedade justify-self.
center	Alinha o item ao centro.
end	Alinha o item ao final na direção da linha e da coluna.
right	Alinha o item à direita na direção da linha, como valor da propriedade justify-self.
alinhamento-de-sobreamento	'safe': Se o conteúdo ultrapassar os limites, o alinhamento do item é definido como 'start'. 'unsafe': Mantém o valor de alinhamento independentemente se o conteúdo ultrapassa os limites.
alinhamento de linha de base	O elemento alinha-se à linha de base do pai.
initial	Defina essa propriedade para 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.placeSelf="end stretch"