Alinhamento de itens flex ao longo do eixo transversal em CSS
Agora vamos alinhar os blocos
ao longo do eixo transversal. O alinhamento ao longo deste eixo
é definido pela propriedade align-items. O valor
flex-start encaixa os elementos no início do
eixo, e o valor flex-end - no final.
Vamos experimentar com exemplos.
Exemplo
Vamos direcionar o eixo principal da esquerda para a direita. Neste caso, o eixo transversal será direcionado de cima para baixo. Vamos ajustar a posição dos nossos blocos ao longo do eixo principal e do eixo transversal.
Ao longo do eixo principal, vamos encaixar os blocos no seu início,
ou seja, na borda esquerda. Para isso, justify-content
será definido como flex-start. Ao longo do
eixo transversal, também encaixaremos os blocos no seu início,
ou seja, na borda superior. Para isso, align-items
também será definido como flex-start.
Vejamos o resultado:
.parent {
display: flex;
flex-direction: row; /* eixo principal para a direita, transversal para baixo */
justify-content: flex-start; /* blocos para o início do eixo principal */
align-items: flex-start; /* blocos para o início do eixo transversal */
}
Resultado da execução do código:
Exemplo
Agora vamos encaixar os blocos no final do eixo transversal,
ou seja, na parte inferior. Para isso, align-items
será definido como flex-end:
.parent {
display: flex;
flex-direction: row; /* eixo principal para a direita, transversal para baixo */
justify-content: flex-start; /* blocos para o início do eixo principal */
align-items: flex-end; /* blocos para o final do eixo transversal */
}
Resultado da execução do código:
Exemplo
Agora vamos direcionar o eixo principal de cima para baixo. Como o eixo principal é vertical, o transversal será direcionado da direita para a esquerda. Vamos encaixar os blocos ao longo de ambos os eixos nos seus inícios:
.parent {
display: flex;
flex-direction: column; /* eixo principal para baixo, transversal para a direita */
justify-content: flex-start; /* blocos para o início do eixo principal */
align-items: flex-start; /* blocos para o início do eixo transversal */
}
Resultado da execução do código:
Exemplo
E agora, ao longo do eixo transversal, vamos encaixar os blocos no seu final:
.parent {
display: flex;
flex-direction: column; /* eixo principal para baixo, transversal para a direita */
justify-content: flex-start; /* blocos para o início do eixo principal */
align-items: flex-end; /* blocos para o final do eixo transversal */
}
Resultado da execução do código:
Exemplo
Vamos encaixar os blocos no final de ambos os eixos:
.parent {
display: flex;
flex-direction: column; /* eixo principal para baixo, transversal para a direita */
justify-content: flex-end; /* blocos para o final do eixo principal */
align-items: flex-end; /* blocos para o final do eixo transversal */
}
Resultado da execução do código:
Exemplo
Vamos mudar a direção do eixo principal - direcionando-o de baixo para cima. Neste caso, o eixo transversal não mudará sua direção, pois o eixo principal ainda é vertical.
Vamos encaixar os blocos no início de ambos os eixos:
.parent {
display: flex;
flex-direction: column-reverse; /* eixo principal para cima, transversal para a direita */
justify-content: flex-start; /* blocos para o início do eixo principal */
align-items: flex-start; /* blocos para o início do eixo transversal */
}
Resultado da execução do código:
