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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

Tarefas práticas