
1. O atributo align-self define o alinhamento dos itens flexíveis individualmente na direção do eixo lateral (eixo vertical).
2. align-self possui um auto adicional (valor padrão), que representa o valor do atributo align-items herdado do flex container.
Exemplo
.recipiente{
/* Definir contêiner flexível */
exibição: flexível;
/*
Defina a direção da disposição dos elementos dentro da linha do contêiner: defina a direção da disposição da esquerda para a direita linha reversa: da direita para a esquerda coluna: de cima para baixo coluna reversa: de baixo para cima
*/
direção flexível: linha;
/*
Defina o alinhamento dos elementos no contêiner no trecho do eixo transversal: Quando a altura do elemento não for definida, a altura do elemento será esticada até a mesma altura do contêiner (padrão)
flex-start: Em direção à posição inicial (para cima/esquerda) no eixo cruzado. Alinhar flex-end: Em direção à posição final (para baixo/para a direita) no eixo cruzado: Linha de base de alinhamento centralizada: Certifique-se de que o texto esteja no eixo cruzado. elemento é ao mesmo tempo uma linha de base (certifique-se de que cada texto esteja na mesma linha)
*/
alinhar itens: linha de base;
altura: 800upx;
cor de fundo: #FFC0CB;
}
.TXT{
tamanho da fonte: 20px;
largura: 150upx;
altura: 150upx;
}
.vermelho{
cor de fundo: vermelho;
/*
Reescrever o alinhamento dos elementos no contêiner no eixo cruzado auto: Padrão, indicando a herança da propriedade align-items do elemento pai stretch: Quando a altura do elemento não for definida, a altura do elemento será esticada para a mesma altura como o contêiner (padrão)
flex-start: Em direção à posição inicial (para cima/esquerda) no eixo cruzado. Alinhar flex-end: Em direção à posição final (para baixo/para a direita) no eixo cruzado: Linha de base de alinhamento centralizada: Certifique-se de que o texto esteja no eixo cruzado. elemento é ao mesmo tempo uma linha de base (certifique-se de que cada texto esteja na mesma linha)
*/
alinhar-se: centro;
}
.verde{
cor de fundo: verde;
}
.azul{
cor de fundo: azul;
}O texto acima é uma introdução ao atributo align-self em CSS. Espero que seja útil para todos.