Fazer itens crescer e encolher

Neste capítulo você vai usar flex-grow, flex-shrink e flex-basis com previsao. 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 é 04-flex-crescer, 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.

flex-grow

flex-grow diz quanto um item pode crescer quando sobra espaço. 1 permite crescer; 0 impede.

Faça na sua cópia

Veja .nav { flex: 1 1 auto; }. A implementação completa está no pacote de exemplos que acompanha este volume.

.nav {
  flex: 1 1 auto;
}

Mude uma coisa e preveja

Troque o primeiro número (grow) de 1 para 0.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O menu deixa de ocupar o espaço livre. Restaure 1.

Se não acontecer

flex: 0 1 auto muda grow e deixa shrink. Observe os três valores.

flex-shrink

flex-shrink controla o encolhimento quando falta espaço. 1 permite encolher; 0 resiste.

Faça na sua cópia

Confira o segundo número de flex nas ações. A implementação completa está no pacote de exemplos que acompanha este volume.

.acoes {
  flex: 0 1 auto;
}

Mude uma coisa e preveja

Mude shrink de 1 para 0 e estreite a janela.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O bloco de ações resiste mais ao encolher. Pode gerar overflow.

Se não acontecer

Teste em janela estreita. Em tela larga o shrink quase não aparece.

flex-basis

flex-basis é o tamanho inicial antes de crescer ou encolher. auto usa o conteúdo. Um valor em rem fixa um ponto de partida.

Faça na sua cópia

Experimente basis no nav. A implementação completa está no pacote de exemplos que acompanha este volume.

.nav {
  flex: 1 1 12rem;
}

Mude uma coisa e preveja

Troque 12rem por 20rem e recarregue.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O ponto de partida do menu aumenta. Ajuste de volta se apertar demais.

Se não acontecer

basis não é largura final. grow e shrink ainda atuam.

Atividades

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

1. Explique com suas palavras o objetivo: usar flex-grow, flex-shrink e flex-basis com previsao.
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 usar flex-grow, flex-shrink e flex-basis com previsao.

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.