Flexbox na prática: 8 padrões de layout que você vai usar sempre

Flexbox resolve, de forma elegante, uma lista enorme de problemas de alinhamento que antes exigiam hacks. Aqui estão os padrões que você provavelmente vai reutilizar em quase todo projeto.

1. Centralização perfeita

.centralizado {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. Barra de navegação com itens nas pontas

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. Cards de altura igual em uma linha

Por padrão, align-items: stretch (valor inicial do flexbox) já faz os itens ocuparem a mesma altura do maior irmão — não é preciso nenhum CSS extra além do display: flex no container.

4. Empurrar um item para o final

.item-final {
  margin-left: auto;
}

Uma margem automática em flexbox consome todo o espaço disponível naquela direção, empurrando o item — muito útil para separar um botão de "Sair" do resto de um menu.

5. Quebra de linha responsiva

.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

6. Ordem visual diferente da ordem no HTML

.destaque { order: -1; }

7. Colunas proporcionais

.coluna-larga  { flex: 2; }
.coluna-estreita { flex: 1; }

8. Empilhar em coluna no mobile

.container {
  display: flex;
  flex-direction: row;
}
@media (max-width: 640px) {
  .container { flex-direction: column; }
}

Domine esses oito padrões e você já resolve a grande maioria dos problemas de alinhamento do dia a dia — teste cada um ao vivo no nosso gerador de Flexbox.