O layout de páginas web é uma aplicação crucial do CSS. Soluções tradicionais baseadas no modelo de caixa, que dependem de display, position e float, apresentam dificuldades em alinhamentos complexos como centralização vertical. O Flexbox, uma proposta do W3C de 2009, oferece uma abordagem simplificada para layouts responsivos, com suporte universal em navegadores modernos.

1. Introdução ao Flexbox

Flexbox (Flexible Box) permite designs flexíveis. Qualquer contêiner pode ser configurado com:

.container-principal {
  display: flex;
}

Para elementos inline:

.elemento-inline {
  display: inline-flex;
}

Observação: Propriedades como float, clear e vertical-align são ignoradas em elementos filhos.

2. Terminologia

• Contêiner Flex: Elemento pai com display: flex
• Itens Flex: Elementos filhos diretos
• Eixos: Principal (main axis) e transversal (cross axis)

3. Propriedades do Contêiner

flex-direction

Define a direção do eixo principal:

.container {
  flex-direction: linha | linha-inversa | coluna | coluna-inversa;
}

flex-wrap

Controla quebra de linha:

.container {
  flex-wrap: sem-quebra | quebra | quebra-inversa;
}

flex-flow

Atalho para flex-direction e flex-wrap:

.container {
  flex-flow: direção modo-quebra;
}

justify-content

Alinhamento no eixo principal:

.container {
  justify-content: inicio | fim | centro | espaco-entre | espaco-uniforme;
}

align-items

Alinhamento no eixo transversal:

.container {
  align-items: inicio | fim | centro | linha-base | esticar;
}

align-content

Alinha múltiplas linhas:

.container {
  align-content: inicio | fim | centro | espaco-entre | espaco-uniforme | esticar;
}

4. Propriedades dos Itens

order

Ordem de exibição:

.item {
  order: 3; /* Valor inteiro */
}

flex-grow

Proporção de expansão:

.item {
  flex-grow: 2; /* Fator de crescimento */
}

flex-shrink

Proporção de redução:

.item {
  flex-shrink: 0; /* Impede redução */
}

flex-basis

Tamanho base inicial:

.item {
  flex-basis: 250px; /* Largura inicial */
}

flex

Atalho para grow/shrink/basis:

.item {
  flex: 1 0 auto; /* Cresce, não reduz, tamanho base automático */
}

align-self

Alinhamento individual:

.item-especial {
  align-self: centro; /* Sobrepõe alinhamento do contêiner */
}