O contêiner flex: eixos e distribuição

O modelo dos dois eixos

Quantas vezes você já brigou para centralizar algo na vertical ou distribuir bem uma fila de elementos? O flexbox existe exatamente para isso: alinhar e distribuir qualquer coisa sem sofrimento. E a centralização vertical, aquela velha dor de cabeça, vira um par de linhas.

Quando você aplica display: flex a um elemento, ele se torna um contêiner flex e seus filhos diretos se tornam flex items. O que distingue o flexbox de tudo o que veio antes é que ele raciocina em termos de dois eixos, não de linhas e colunas absolutas:

• Eixo principal (main axis): a direção em que os itens são colocados.
• Eixo cruzado (cross axis): o perpendicular ao principal.

A chave conceitual: justify-content alinha no eixo principal e align-items alinha no eixo cruzado. Qual eixo é qual quem decide é o flex-direction.

flex-direction: quem é o eixo principal

.contenedor {
  display: flex;
  flex-direction: row;     /* padrão: eixo principal horizontal → */
}

Com row o eixo principal vai da esquerda para a direita, então justify-content reparte horizontalmente e align-items alinha verticalmente. Com column os papéis se invertem:

.contenedor {
  display: flex;
  flex-direction: column;  /* eixo principal vertical ↓ */
}

Agora justify-content reparte na vertical e align-items na horizontal. ⚠️ PEGADINHA CLÁSSICA: confundir os dois eixos é o erro número um com flexbox. Não memorize "justify = horizontal", memorize "justify = eixo principal" e deixe o flex-direction decidir qual é esse eixo.

Existem também row-reverse e column-reverse, que invertem a ordem visual dos itens sem mexer no HTML.

justify-content: repartir o eixo principal

justify-content decide o que fazer com o espaço sobrante do eixo principal:

.barra {
  display: flex;
  justify-content: space-between; /* extremos afastados, espaço no meio */
}

align-items: alinhar o eixo cruzado

.contenedor {
  display: flex;
  align-items: center;   /* centraliza os itens no eixo cruzado */
}

Seu valor padrão é stretch: os itens são esticados para ocupar toda a altura do contêiner (em uma linha). Por isso, se você colocar display: flex em uma linha de cards com conteúdos diferentes, todos acabam com a mesma altura "de graça", sem você ter que igualá-los na mão. Outros valores: flex-start, flex-end, baseline.

flex-wrap: permitir várias linhas

Por padrão os itens não quebram de linha: encolhem até caber. Com flex-wrap: wrap você permite que passem para uma nova linha quando não couberem:

.galeria {
  display: flex;
  flex-wrap: wrap;   /* nowrap (padrão) | wrap | wrap-reverse */
}

gap: separação sem margens

gap define o espaço entre os itens sem adicioná-lo nas bordas, evitando os antigos truques de margin com "o último sem margem":

.contenedor {
  display: flex;
  gap: 16px;            /* mesmo espaço horizontal e vertical */
  gap: 8px 24px;        /* linha coluna: 8px entre linhas, 24px entre colunas */
}

Com essas seis propriedades do contêiner você já resolve a maioria dos layouts do dia a dia. O controle fino vive nos itens, e é justamente o que vem a seguir.