Flexbox

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/11-flexbox/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Alinhar itens em um eixo.
• Permitir a quebra do menu sem sobrepor conteúdo.

Flexbox no projeto-fio

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

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

O contêiner é a caixa que recebe display: flex; seus filhos diretos viram itens flexíveis. Na .topo, esses itens são a marca e a navegação. Na .menu, são os itens li.

flex-wrap permite uma linha nova quando o conjunto não cabe. align-items: center alinha os itens no eixo transversal; em uma linha horizontal, isso alinha suas alturas. justify-content: space-between distribui o espaço livre entre os itens no eixo principal. gap reserva espaço entre vizinhos, sem acrescentar margem nas bordas externas.

Não troque a ordem de leitura só para ajustar aparência. Primeiro deixe o HTML na ordem em que uma pessoa deve percorrer o menu. Confira com Tab e com CSS desligado.

flex-wrap: wrap deixa o menu quebrar a linha no celular em vez de estourar. gap separa itens sem margem-gambiarra. Grid existe e é ótimo para páginas em duas dimensões; fica como próximo passo, não como assunto deste capítulo.

O exemplo 11-flexbox já traz o cabeçalho em flex e uma notícia com imagem flutuando. Estreite a janela: o menu deve descer, não sair pela direita.

Pare e experimente. Na cópia de estilos.css, localize .menu e mude só gap para 1.5rem. Preveja o espaço, recarregue e confira em tela estreita. Devolva o valor.

Atividades

1. Como permitir quebra?
2. Como separar itens?
3. Como testar a ordem acessível?
4. O que acontece ao estreitar?

Respostas comentadas

1. Com flex-wrap: wrap no contêiner.
2. Use gap no contêiner; confira também a largura dos filhos.
3. Leia o HTML e percorra o menu com Tab; a ordem visual deve acompanhar a leitura.
4. O menu deve quebrar para outra linha sem sair pela direita.

O arquivo completo

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

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}