A align-selfpropriedade é uma subpropriedade do módulo Layout de caixa flexível.
Torna possível substituir o align-itemsvalor para itens flexíveis específicos.
A align-selfpropriedade aceita os mesmos 5 valores que align-items:
flex-start: borda da margem de início cruzado do item é colocada na linha de início cruzadoflex-end: a borda da margem da extremidade cruzada do item é colocada na linha da extremidade cruzadacenter: o item está centrado no eixo cruzadobaseline: os itens estão alinhados, assim como sua linha de base está alinhadastretch(padrão): esticar para preencher o contêiner (ainda respeitar largura mínima / largura máxima)
Sintaxe
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demo
A demonstração a seguir mostra como um item pode se alinhar no flex container dependendo do align-selfvalor:
- O primeiro item é definido como
flex-start - O segundo item é definido como
flex-end - O terceiro item é definido como
center - O 4º item está definido para
baseline - O quinto item é definido como
stretch
Veja a demonstração Pen align-self por CSS-Tricks (@ css-tricks) no CodePen.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 | 7,0-7,1 * |
Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte do navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).