Flexbox: o guia visual

Flexbox é o jeito mais direto de organizar elementos em uma direção (linha ou coluna). Esqueça floats e hacks com inline-block.

O container e os itens

Ao aplicar display: flex num elemento, ele vira o flex container e seus filhos diretos viram flex items.

.container {
  display: flex;
  flex-direction: row;      /* row | column */
  justify-content: center;  /* eixo principal */
  align-items: center;      /* eixo cruzado */
  gap: 16px;
}

justify-content vs align-items

• justify-content alinha no eixo principal (horizontal por padrão).
• align-items alinha no eixo cruzado (vertical por padrão).
• Trocar flex-direction para column inverte os dois eixos.

.card {
  flex: 1;            /* cresce para ocupar espaço */
  min-width: 200px;
}

.destaque {
  flex: 2;            /* cresce o dobro dos outros */
}