Alinhar itens com justify e align

Neste capítulo você vai distribuir e alinhar ações do cabeçalho com Flexbox. 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 é 03-alinhar-flex, 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.

justify-content no eixo principal

justify-content distribui espaço livre no eixo principal. space-between empurra o primeiro e o último para as pontas. Útil no cabeçalho.

Faça na sua cópia

Localize justify-content em .topo. A implementação completa está no pacote de exemplos que acompanha este volume.

justify-content: space-between;

Mude uma coisa e preveja

Troque por center.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O grupo se concentra no meio. Volte para space-between.

Se não acontecer

Sem largura sobrando, a diferença some. Amplie a janela para ver.

align-items no eixo cruzado

align-items alinha os itens no eixo cruzado. center alinha marcas e botões pela linha do meio quando as alturas diferem.

Faça na sua cópia

Confira align-items: center. A implementação completa está no pacote de exemplos que acompanha este volume.

align-items: center;

Mude uma coisa e preveja

Use stretch.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Itens podem alongar no cruzado. Compare com center.

Se não acontecer

stretch precisa de altura disponível. Não force height no teste.

Agrupar para controlar partes

Às vezes você envolve marca e menu num grupo. Assim justify-content trata o grupo como um bloco e as ações como outro.

Faça na sua cópia

Observe a estrutura do cabeçalho na referência. A implementação completa está no pacote de exemplos que acompanha este volume.

<div class="grupo-nav">
  <p class="marca">…</p>
  <nav class="nav">…</nav>
</div>

Mude uma coisa e preveja

Na cópia, remova só a classe grupo-nav do div (mantenha o conteúdo).

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A distribuição muda. Restaure a classe.

Se não acontecer

Não apague o nav. Só teste a classe do agrupador.

Atividades

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

1. Explique com suas palavras o objetivo: distribuir e alinhar ações do cabeçalho com Flexbox.
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 distribuir e alinhar ações do cabeçalho com Flexbox.

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.