Entender os eixos do Flexbox

Neste capítulo você vai reconhecer eixo principal e cruzado e mudar a direção do cabeçalho. 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 é 02-eixos-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.

Container e itens

Flexbox começa quando um elemento recebe display: flex. Esse elemento é o container. Os filhos diretos são os itens. No cabeçalho da Vitrine, .topo é o container.

Faça na sua cópia

Confira a regra do topo em assets/styles.css. A implementação completa está no pacote de exemplos que acompanha este volume.

.topo {
  display: flex;
  flex-direction: row;
}

Mude uma coisa e preveja

Troque flex-direction: row por flex-direction: column.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Marca, menu e ação empilham. Volte para row depois de conferir.

Se não acontecer

Aplique display: flex no container, não em cada link.

Eixo principal

O eixo principal segue flex-direction. Em row, segue a linha. Em column, segue a coluna. Os itens se organizam nesse eixo primeiro.

Faça na sua cópia

Mantenha display: flex e observe row. A implementação completa está no pacote de exemplos que acompanha este volume.

flex-direction: row;

Mude uma coisa e preveja

Altere só para row-reverse.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A ordem visual inverte na linha. O HTML não mudou.

Se não acontecer

Não confunda row-reverse com order. Aqui só a direção do eixo mudou.

Eixo cruzado

O eixo cruzado é perpendicular ao principal. Em row, o cruzado é vertical. align-items trabalha nesse eixo. Você verá alinhamento com mais detalhe na próximo capítulo.

Faça na sua cópia

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

align-items: center;

Mude uma coisa e preveja

Troque center por flex-start.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Os itens sobem no eixo cruzado. Restaure center.

Se não acontecer

justify-content não é o eixo cruzado. Use align-items aqui.

Atividades

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

1. Explique com suas palavras o objetivo: reconhecer eixo principal e cruzado e mudar a direção do cabeçalho.
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 reconhecer eixo principal e cruzado e mudar a direção do cabeçalho.

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.