Flexbox

Antes do flexbox, centralizar uma caixa na vertical exigia truques. Com display: flex, bastam duas declarações: justify-content e align-items.

Uma linha ou uma coluna

O flexbox, o módulo CSS Flexible Box Layout, organiza um grupo de caixas ao longo de uma linha. Ponha display: flex num contêiner e os filhos diretos dele, os itens flex, se alinham lado a lado em vez de se empilharem. Essa única declaração basta para uma barra de menu, uma fileira de botões ou um cartão cujo rodapé deve ficar grudado embaixo. O flexbox trabalha numa dimensão por vez: ou uma linha, ou uma coluna. Quando você precisa de linhas e colunas juntas, o grid, da próxima unidade, costuma ser a ferramenta melhor.

Dois eixos

Tudo no flexbox é descrito em termos de dois eixos. O eixo principal é a direção em que os itens correm, definida por flex-direction: row (o padrão) ou column. O eixo transversal fica em ângulo reto com ele. justify-content distribui os itens ao longo do eixo principal: flex-start, center, flex-end, space-between (primeiro e último item nas bordas, espaços iguais entre eles) ou space-around. align-items os posiciona no eixo transversal: stretch (o padrão, todos os itens com a altura do mais alto), flex-start, center ou flex-end. Então uma caixa fica centralizada nas duas direções com justify-content: center e align-items: center.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Espaços e quebra de linha

gap põe espaço entre os itens sem acrescentar nada nas bordas externas, que é o que você quase sempre quer e o que as margens complicam. Por padrão, os itens flex ficam numa só linha e encolhem para caber, mesmo que fiquem espremidos. flex-wrap: wrap deixa os itens passarem para uma linha nova quando não há espaço, então uma fileira de quatro cartões no notebook pode virar duas fileiras de dois no tablet e uma coluna só no celular, sem nenhuma media query.

Como os itens crescem e encolhem

O atalho flex num item recebe três valores. flex-grow diz quanto do espaço que sobra o item pega em comparação com os irmãos; flex-shrink diz com que facilidade ele encolhe quando falta espaço; flex-basis é o tamanho inicial antes de crescer ou encolher. flex: 1 1 200px quer dizer começar com 200 pixels e depois dividir o espaço extra igualmente com os outros itens que também têm grow 1. flex: 1 sozinho é a forma curta de 1 1 0%, que deixa todos os itens com a mesma largura. Dê a um item flex-grow: 2 e aos outros 1, e ele pega o dobro da parte deles no espaço que sobra.

Ordem visual e ordem real

O flexbox pode mudar a ordem em que os itens aparecem, com flex-direction: row-reverse ou com a propriedade order, sem mexer no HTML. Use isso com cuidado. O foco do teclado e os leitores de tela continuam seguindo a ordem do HTML, então se a tela mostra Contact antes de Home mas o Tab visita Home primeiro, quem usa teclado se perde. Quando a ordem importa para o sentido, mude-a no HTML.