flex-direction: fileira, coluna e a troca de eixo

Todo exemplo até agora apontou para um lado

O curso passado construiu uma navbar e um modal centralizado, mas todo exemplo manteve o eixo principal na direção padrão: horizontal, da esquerda para a direita. Esse padrão era só um ponto de partida. flex-direction é a propriedade que o gira.

.row {
  display: flex;
  flex-direction: row; /* o padrão, declarado explicitamente */
}

Os quatro valores

row (padrão)
→  [1][2][3]

row-reverse
→  [3][2][1]

column
↓  [1]
   [2]
   [3]

column-reverse
↓  [3]
   [2]
   [1]

row organiza os itens da esquerda para a direita, e row-reverse inverte para da direita para a esquerda. column empilha de cima para baixo, e column-reverse inverte para de baixo para cima. O display: flex não muda. Os itens continuam sendo itens flex e o gap continua espaçando; eles só seguem outra linha.

As definições de eixo se movem com a direção

Aqui está o detalhe em torno do qual esta aula gira, e é fácil entender ao contrário. O eixo principal sempre aponta para onde o flex-direction aponta, e o eixo transversal é sempre perpendicular. Troque para flex-direction: column e o eixo principal, horizontal em todo exemplo do curso passado, vira vertical. O eixo transversal vira horizontal.

flex-direction: row                    flex-direction: column
eixo principal:  horizontal →→→        eixo principal:  vertical ↓↓↓
eixo transversal: vertical ↕           eixo transversal: horizontal ↔

justify-content e align-items não mudaram de significado, a direção deles mudou

É aqui que o vocabulário de "eixo principal" e "eixo transversal" do curso passado compensa. justify-content continua posicionando os itens no eixo principal, e align-items no eixo transversal. O que muda é a direção física de cada eixo.

.column {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* ainda o eixo principal: agora centralização vertical */
  align-items: center;      /* ainda o eixo transversal: agora centralização horizontal */
}

O padrão de centralização do curso passado continua funcionando. justify-content: center mais align-items: center centraliza o grupo nos dois eixos, porque as duas propriedades foram definidas por eixo, nunca por "horizontal" e "vertical". Se você decorou "justify-content move as coisas para os lados", flex-direction: column vai confundir. A definição por eixo é o que deixa esta aula coerente com o curso passado.

Quando recorrer a column

flex-direction: column aparece o tempo todo em layouts mobile-first: os elementos de um card empilhados numa tela estreita, os links de uma barra lateral, os campos de um form de cima para baixo. Elementos block já empilham no fluxo normal, como o curso Layouts CSS mostrou. column vale a pena quando você também quer justify-content, align-items e gap do flexbox nessa pilha vertical.

O que este curso cobre

• Aula 1, flex-direction (fileira, coluna e a troca de eixo): girando o eixo principal, e por que as propriedades de alinhamento continuam significando a mesma coisa (você está aqui)
• Aula 2, flex-wrap: o que acontece quando itens ficam sem espaço numa linha
• Aula 3, align-content: espaçamento entre várias linhas quebradas
• Aula 4, flex-grow: deixando itens absorverem espaço sobrando no eixo principal
• Aula 5, flex-shrink e flex-basis: como itens encolhem para caber, e seu tamanho inicial
• Aula 6, order: reordenando itens visualmente, e a troca de acessibilidade que vem junto
• Aula 7, Juntando tudo: uma fileira de cards responsiva usando cada propriedade deste curso

No final, você vai controlar onde os itens ficam, em que direção fluem, o que acontece quando falta espaço e quanto do espaço que sobra cada um pega.