Propriedade align-self CSS

Definição e uso

align-self Propriedade que especifica o modo de alinhamento do item selecionado dentro do contêiner flexível.

Atenção:A propriedade align-self cobre a propriedade do contêiner flexível align-items Propriedade.

Veja também:

Tutorial do CSS:CSS Grid

Tutorial do CSS:Flexbox do CSS

Manual do CSS:Propriedade alignContent

Manual do CSS:Propriedade alignItems

Manual do CSS:Propriedade justifySelf

Manual do HTML DOM:Propriedade alignSelf

Exemplo

Centralize um dos itens dentro do elemento flexível:

#myBlueDiv {
  align-self: center;
}

Experimente você mesmo

Sintaxe do CSS

align-self: auto|stretch|center|flex-start|flex-end|linha de base|initial|inherit;

Valor da propriedade

Valor Descrição
auto Padrão. O elemento herda a propriedade align-items do contêiner pai, se não houver contêiner pai, então é "stretch".
stretch O elemento é esticado para se adaptar ao contêiner.
center O elemento está localizado no centro do contêiner.
flex-start O elemento está localizado no início do contêiner.
flex-end O elemento está localizado no extremo do contêiner.
linha de base O elemento é posicionado na linha de base do contêiner.
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: 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.alignSelf="center"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0