Flexbox

O menu e a faixa de cartazes do Belavista precisam se repartir no espaço sobrando. Flexbox é layout em uma dimensão: linha ou coluna, com crescimento, encolhimento e alinhamento.

O exemplo deste capítulo é 30-flexbox, no pacote que acompanha o volume. Mude flex-direction ou justify-content, preveja, recarregue e confira.

O que você vai aprender

• Criar um flex container com display: flex.
• Distinguir eixo principal e eixo cruzado.
• Usar flex-wrap, gap, grow/shrink/basis.
• Alinhar com justify-content e align-items.
• Cuidar da ordem visual versus ordem no HTML (acessibilidade).

Eixos

flex-direction: row (padrão) põe o eixo principal na linha. column põe na coluna. O eixo cruzado é o perpendicular. Quase tudo em flex fala “no principal” ou “no cruzado”.

.toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

Crescer e encolher

.toolbar .marca {
  flex: 0 0 auto;
}

.toolbar .busca {
  flex: 1 1 12rem;
}

.toolbar .acoes {
  flex: 0 1 auto;
}

flex é atalho de grow, shrink e basis. Itens com grow dividem o espaço livre. gap espaça sem gambiarra de margem.

HTML do exemplo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flexbox — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="toolbar">
      <p class="marca">Belavista</p>
      <p class="busca">Busca de cartazes (demo)</p>
      <p class="acoes">Inscrições</p>
    </header>
  </body>
</html>

Ordem e acessibilidade

order e row-reverse mudam a ordem visual. O Tab ainda segue o HTML. Não inverta o menu só no CSS se a ordem de foco ficar confusa. Prefira reordenar o markup.

Erro comum: esquecer flex-wrap: wrap e deixar itens esmagados em telas estreitas. Com wrap + basis mínimo, a toolbar quebra linha com elegância.

Critério para avançar

Você avança se: aponta o eixo principal do seu exemplo; usa gap em vez de margem só no último item; testa a toolbar estreita.

Atividades

1. Com flex-direction: column, justify-content age em qual eixo da tela?
2. O que flex: 1 costuma significar na prática?
3. Por que order: -1 pode ser perigoso para teclado?

Respostas comentadas

1. No eixo vertical (principal passou a ser a coluna).
2. Cresce para ocupar espaço livre (1 1 0% ou similar, conforme o navegador/expansão do atalho).
3. A ordem visual deixa de bater com a ordem de foco no DOM; quem navega por Tab se perde.