Flexbox

Este capítulo ensina o modelo que alinha o cabeçalho, o menu e as faixas da Oficina Costeira. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Flexbox age no pai. Os filhos obedecem.

O exemplo está em exemplos/26-flexbox/. Toda página usa lang="pt-BR". Este volume tem 52 capítulos.

Float continua só no recorte de imagem. A página em si é flex. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Criar um flex container e reconhecer flex items.
• Distinguir eixo principal e eixo cruzado.
• Distribuir com justify-content e alinhar com align-items.
• Quebrar linha com flex-wrap e virar coluna com flex-direction.
• Montar o menu e a faixa da marca.
• Empurrar um bloco com flex-grow e usar gap.

O pai manda, os filhos diretos obedecem

Você não “dá flex” no item que quer mover. Você declara display: flex no pai. Cada filho direto vira um item.

<div class="faixa">
  <a class="brand" href="index.html">Oficina Costeira</a>
  <nav aria-label="Principal">…</nav>
</div>

.faixa {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

A marca e o nav sentam na mesma linha. O ul dentro do nav não é item da .faixa. Só os filhos diretos entram. Se você quiser duas colunas de cartaz com título e parágrafo, agrupe cada cartaz num div.

<section class="cards">
  <article class="card">
    <h2>Feira de Tambaú</h2>
    <p>Cartaz fictício.</p>
  </article>
  <article class="card">
    <h2>Sinalização da orla</h2>
    <p>Projeto fictício.</p>
  </article>
</section>

display: flex na section alinha os dois article. Os h2 continuam bloco dentro do cartão.

Flex container é bloco por fora, a menos que você use inline-flex. A Oficina Costeira usa o bloco: a faixa ocupa a largura do .wrap.

Dentro do flex, as margens verticais não colapsam. As duas valem. Se o h2 e o p ganharem margem extra, é isso. Ajuste no item, não brigue com o colapso do capítulo 23.

Dois eixos

O eixo principal é a direção em que os itens se enfileiram. No inicial, é a linha: da esquerda para a direita no português.

O eixo cruzado é o perpendicular. Na linha, é o vertical.

justify-content trabalha no eixo principal. align-items trabalha no eixo cruzado.

Se você virar flex-direction: column, os eixos trocam. O principal passa a ser de cima para baixo. justify-content passa a distribuir na vertical. align-items na horizontal.

Decore a frase, não a seta fixa: justify é o eixo em que a fila anda. Align é o outro.

.hero-coluna {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12rem;
}

justify-content e align-items

Valores úteis de justify-content:

• flex-start — início (padrão);
• flex-end — fim;
• center — centro do eixo principal;
• space-between — primeiro e último nas pontas, vão igual no meio;
• space-around — vão em volta de cada item (as pontas ficam com metade).

A .faixa usa space-between: marca numa ponta, menu na outra.

align-items:

• stretch — estica no cruzado (comum no padrão);
• flex-start / flex-end;
• center — centros alinhados, ótimo quando a marca e o menu têm alturas diferentes.

.faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

gap é o vão entre itens. Prefira gap a margem em cada li quando o pai já é flex. O vão não dobra nas pontas.

width nos itens ainda vale. flex-basis é o irmão mais específico do tamanho inicial. Neste volume, width e gap bastam.

wrap, direction e order

Sem espaço, os itens podem transbordar. flex-wrap: wrap manda o resto para a linha seguinte. O menu da Oficina Costeira envolve no celular.

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

flex-direction: row-reverse e column-reverse invertem a fila visual. O HTML continua na ordem de leitura. Use com parcimônia: o NVDA segue o arquivo, não o desenho. Se a ordem visual mentir demais, reescreva o HTML.

order: -1 puxa um item para o começo visual. Mesmo aviso. Cabeçalho com marca primeiro no HTML é o honesto.

O CSS que o exemplo já tem

O main.css da etapa 26 soma a faixa e reforça o menu:

.menu {
  display: flex;
  gap: 1rem;
}
.faixa {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

O recorte com float do capítulo 25 permanece. Os modelos convivem: a página alinha com flex; a figura do texto usa float.

Para cartões com botão colado embaixo, o cartão vira um flex em coluna. O parágrafo do meio cresce.

.card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}
.card p {
  flex-grow: 1;
}
.card .botao {
  align-self: flex-start;
}

flex-grow: 1 no p come o espaço sobrando. Os botões dos cartões vizinhos alinham na base, mesmo com textos de tamanhos diferentes.

align-self no botão fura o align-items do pai só naquele item.

O que não misturar

Não coloque float no mesmo item que você quer como flex item da página. O float tira do fluxo que o flex está tentando organizar.

Não use order para consertar HTML bagunçado. Arrume o arquivo.

Não espere prefixos -webkit- neste volume. display: flex basta nos navegadores atuais do exercício.

Pare e experimente. Na .faixa, mude só justify-content de space-between para center. Preveja: marca e menu grudam no meio. Recarregue e confira. Devolva space-between.

Erro comum: aplicar display: flex no li em vez do ul. Os filhos do li (os a) viram a fila. Os li continuam empilhados. O pai certo é o ul.

Você fechou a série de caixas: modelo, fluxo, float pontual e flex no pai. Os capítulos seguintes tratam position, Grid e navegação com mais peças. O servidor continua em 127.0.0.1. O conteúdo continua fictício.

Atividades

1. Por que display: flex vai na .faixa e não na .brand?
2. Com flex-direction: row (padrão), justify-content empurra os itens em qual eixo?
3. O que gap evita no menu que margin em cada li costuma errar?
4. Por que order: -1 no menu é arriscado para o NVDA?
5. Como flex-grow: 1 no p do .card ajuda dois cartões vizinhos?

Respostas comentadas

1. Flex organiza os filhos diretos. A faixa tem marca e nav como filhos. A marca é um dos itens, não o container.
2. No eixo principal horizontal (esquerda–direita no pt-BR).
3. O vão entre itens fica uniforme e não dobra nas pontas. Margem em cada li soma nos dois lados e desalinhas as pontas.
4. O leitor segue a ordem do HTML. O visual invertido mente o mapa. Melhor o arquivo já nascer na ordem certa.
5. O parágrafo cresce e empurra o botão para baixo. Os botões dos dois cartões ficam na mesma base.

Referências

• Flexbox
• flex-direction
• justify-content
• align-items
• gap

O arquivo completo

Referência do exemplo 26-flexbox, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}