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.