Flexbox começa pelo container, pelos itens e pelos eixos

Flexbox organiza os filhos de um elemento em uma dimensão: uma linha ou uma coluna. Nesta aula, você vai transformar três cartões empilhados em uma fileira e aprender a prever o sentido do layout antes de experimentar propriedades ao acaso.

O nome técnico do mecanismo é flexible formatting context, ou contexto de formatação flexível. Pense numa prateleira: a prateleira é o container flexível, e os livros apoiados diretamente nela são os itens flexíveis. O eixo principal acompanha o comprimento da prateleira; o eixo transversal cruza esse caminho. A comparação tem um limite: itens flexíveis não são objetos rígidos. O navegador pode aumentar, reduzir e quebrar esses itens conforme as regras e o espaço disponível.

Ative o comportamento no pai

Comece com uma lista de ações:

<nav class="acoes">
  <a href="/">Início</a>
  <a href="/catalogo">Catálogo</a>
  <a href="/contato">Contato</a>
</nav>

Sem CSS, os links aparecem segundo o fluxo normal. A propriedade que cria o contexto flexível entra no elemento que contém os itens:

.acoes {
  display: flex;
}

Agora os três filhos diretos de .acoes são itens flexíveis. O nav não vira item de si mesmo, e um elemento dentro de cada link não é organizado diretamente por essa regra. Essa fronteira evita um erro comum: colocar display: flex em cada filho e esperar que o grupo se alinhe. Quem organiza a fila é o pai.

Dê nome aos dois eixos

O valor inicial de flex-direction é row. Em português escrito da esquerda para a direita, o eixo principal normalmente segue na horizontal e o transversal fica na vertical:

.acoes {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

flex-start e flex-end também acompanham o modo de escrita. Em uma página da direita para a esquerda, o começo de uma linha não é necessariamente o lado esquerdo da tela. Pensar em início, fim e eixos mantém o layout compatível com outros idiomas e evita transformar uma convenção atual numa regra universal.

Troque para column. Os links voltam a ficar um abaixo do outro, mas continuam num contexto flexível. O que mudou foi a direção do eixo principal: agora ele é vertical. Por isso não é seguro decorar que justify-content significa “horizontal” e align-items significa “vertical”. Essas propriedades seguem os eixos, e os eixos podem girar.

Existem também row-reverse e column-reverse. Eles mudam a apresentação, mas não reescrevem a ordem do HTML. Uma pessoa que navega por teclado ou usa tecnologia assistiva ainda encontra o conteúdo na ordem original. Use reversão quando a leitura continua coerente; não para remendar uma estrutura escrita na ordem errada.

Reconheça o erro pelo contorno

Se os elementos não se moverem, desenhe temporariamente uma borda no pai:

.acoes {
  border: 2px dashed tomato;
}

Inspecione quais nós estão imediatamente dentro desse contorno. Se houver uma div intermediária, ela é o item flexível, não os links guardados dentro dela. Você pode mover o display: flex para essa div ou decidir que o agrupamento é intencional.

No laboratório, altere uma propriedade por vez e fale em voz alta: “container, itens, eixo principal, eixo transversal”. Sua missão é criar uma navegação com marca e três links, confirmar que todos são filhos diretos e registrar qual direção continua legível em uma tela estreita. Quando você consegue apontar os eixos antes de executar, as próximas propriedades deixam de parecer uma lista de tentativas.