Alinhamento de elementos flex ao longo do eixo principal em CSS
A propriedade justify-content permite
alinhar elementos ao longo do eixo principal. Anteriormente,
você já conheceu os valores center,
space-between, space-around,
space-evenly. Vamos agora estudar
mais alguns valores.
O valor flex-start alinha os elementos ao início
do eixo principal, e o valor flex-end - ao final.
Vamos ver os exemplos.
Exemplo
Vamos direcionar o eixo principal da esquerda para a direita, definindo
a propriedade flex-direction como row.
Alinhamos os blocos ao início do eixo. Para isso, definimos justify-content
como flex-start:
.parent {
display: flex;
flex-direction: row; /* eixo principal da esquerda para a direita */
justify-content: flex-start; /* blocos alinhados ao início do eixo principal */
}
Resultado da execução do código:
Exemplo
Agora, vamos alinhar os blocos ao final do eixo.
Para isso, definimos justify-content
como flex-end:
.parent {
display: flex;
flex-direction: row; /* eixo principal da esquerda para a direita */
justify-content: flex-end; /* blocos alinhados ao final do eixo principal */
}
Resultado da execução do código:
Exemplo
Agora, vamos direcionar o eixo principal da direita para a esquerda,
definindo a propriedade flex-direction como
row-reverse. Alinhamos os blocos ao início
do eixo, ou seja, à borda direita. Para isso, definimos justify-content
como flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* eixo principal da direita para a esquerda */
justify-content: flex-start; /* blocos alinhados ao início do eixo principal */
}
Resultado da execução do código:
Exemplo
Agora, vamos alinhar os blocos ao final do eixo principal,
ou seja, à borda esquerda. Para isso, definimos justify-content
como flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* eixo principal da direita para a esquerda */
justify-content: flex-end; /* blocos alinhados ao final do eixo principal */
}
Resultado da execução do código:
Exemplo
Nos exemplos anteriores, o eixo principal estava direcionado horizontalmente. Vamos agora invertê-lo e direcioná-lo verticalmente.
Vamos direcionar o eixo principal para baixo, definindo
a propriedade flex-direction como
column.
Alinhamos os blocos ao início do eixo principal, ou seja,
à borda superior. Para isso, definimos justify-content
como flex-start:
.parent {
display: flex;
flex-direction: column; /* eixo principal de cima para baixo */
justify-content: flex-start; /* blocos alinhados ao início do eixo principal */
}
Resultado da execução do código:
Exemplo
Agora, vamos alinhar os blocos ao final do eixo principal,
ou seja, à borda inferior. Para isso, definimos justify-content
como flex-end:
.parent {
display: flex;
flex-direction: column; /* eixo principal de cima para baixo */
justify-content: flex-end; /* blocos alinhados ao final do eixo principal */
}
Resultado da execução do código:
Exemplo
Vamos inverter o eixo principal, direcionando-o de baixo
para cima. Para isso, definimos a propriedade flex-direction
como column-reverse. Neste caso, os blocos mudarão sua ordem -
no início do eixo ficará o último bloco no código HTML.
Vamos alinhar os blocos ao início do eixo principal,
ou seja, à borda inferior. Para isso, definimos justify-content
como flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* eixo principal de baixo para cima */
justify-content: flex-start; /* blocos alinhados ao início do eixo principal */
}
Resultado da execução do código:
Exemplo
Vamos alinhar os blocos ao final do eixo principal,
ou seja, à borda superior. Para isso, definimos justify-content
como flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* eixo principal de baixo para cima */
justify-content: flex-end; /* blocos alinhados ao final do eixo principal */
}
Resultado da execução do código:
