Quebrar linhas com flex-wrap

Neste capítulo você vai permitir que o menu e as acoes quebrem sem cortar o conteudo. O projeto de estudo é a Vitrine da Aurora, um espaço cultural fictício no Recife.

Seu ponto de partida

Você já sabe abrir HTML e ligar uma folha CSS. Se ainda faltar essa base, use um curso introdutório de HTML e CSS antes. O exemplo deste capítulo é 05-flex-wrap, no pacote que acompanha o volume. Trabalhe sobre uma cópia da pasta inicio/ e preserve o original; a versão de referência fica na raiz do exemplo.

Abra index.html da cópia no navegador e o mesmo arquivo num editor de texto. Abrir ou testar não publica a página.

Como praticar

Leia, confira o código, mude uma coisa, preveja, salve, recarregue e confira. Investigue o erro antes de avançar. Ao terminar cada experiência, restaure a mudança pedida quando o capítulo indicar.

Há jogos públicos que treinam Flexbox com feedback imediato. Use só como reforço curto; o percurso continua na Vitrine.

flex-wrap

Por padrão os itens tentam ficar numa linha. flex-wrap: wrap permite quebrar. Em cabeçalhos estreitos, isso evita cortar links.

Faça na sua cópia

Confira flex-wrap no topo. A implementação completa está no pacote de exemplos que acompanha este volume.

.topo {
  display: flex;
  flex-wrap: wrap;
}

Mude uma coisa e preveja

Troque wrap por nowrap e estreite a janela.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Itens podem transbordar. Volte para wrap.

Se não acontecer

Ampliação de 200% também aperta. Teste zoom, não só largura.

Wrap no menu

O nav também pode quebrar. Assim os links descem juntos sem sumir.

Faça na sua cópia

Veja flex-wrap no .nav. A implementação completa está no pacote de exemplos que acompanha este volume.

.nav {
  display: flex;
  flex-wrap: wrap;
}

Mude uma coisa e preveja

Remova flex-wrap só do nav e teste em 320px de largura.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Links podem apertar ou sair. Restaure wrap.

Se não acontecer

Use as ferramentas de largura do navegador ou redimensione a janela.

Prática opcional

Se quiser treinar eixos com feedback imediato, há jogos públicos de Flexbox na internet. Eles não substituem este capítulo; só reforçam o olho. Volte à Vitrine depois de poucos minutos.

Faça na sua cópia

Revise o cabeçalho com wrap ativo. A implementação completa está no pacote de exemplos que acompanha este volume.

flex-wrap: wrap;

Mude uma coisa e preveja

Deixe wrap e aumente gap para 1.5rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O espaço entre grupos cresce; a quebra continua possível.

Se não acontecer

gap não remove a necessidade de wrap em telas estreitas.

Atividades

Faça na cópia. Não olhe as respostas antes de tentar.

1. Explique com suas palavras o objetivo: permitir que o menu e as acoes quebrem sem cortar o conteudo.
2. Faça uma mudança diferente da lição e diga o que esperava versus o que viu.
3. Em tela estreita (cerca de 320px) ou zoom 200%, anote o que ainda funciona e o que aperta.

Critério de avanço

Você avança quando permitir que o menu e as acoes quebrem sem cortar o conteudo.

Respostas comentadas

Atividade 1

O objetivo amarra a etapa ao resultado visível na Vitrine; sem isso a propriedade fica solta.

Atividade 2

Prever antes de recarregar mostra se você entendeu a regra ou só imitou o código.

Atividade 3

Layout de estudo precisa sobreviver a zoom e tela estreita; anotar falhas evita avançar no escuro.