Casos clássicos: navbar e card row
Duas combinações de Flexbox aparecem em praticamente todo site do mundo. Vale memorizar a receita.
Estudar esta lição interativa →Juntando eixos, alinhamento e distribuição, dois padrões de layout aparecem com tanta frequência que valem a pena memorizar como receita pronta: a navbar (barra de navegação) e a linha de cartões.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Navbar: display:flex + justify-content:space-between + align-items:center. Linha de cards: display:flex + gap, cada card com flex:1 para dividir o espaço igualmente.
Repare no flex: 1 de cada cartão na linha: essa propriedade diz "cresça para preencher uma fração igual do espaço disponível", o que faz três cartões dividirem o espaço em partes iguais automaticamente, sem você calcular porcentagem nenhuma na mão, e reajustando sozinho se você adicionar um quarto cartão. Por baixo, flex: 1 é um atalho para flex-grow: 1, flex-shrink: 1 e flex-basis: 0%: todos partem de largura zero e crescem em partes iguais. Se um cartão tiver um texto longo sem quebra e estourar o tamanho, min-width: 0 nele permite que encolha.
Por padrão, o Flexbox tenta espremer todos os itens numa única linha, mesmo que eles fiquem apertados demais. Para permitir que os itens quebrem para a linha de baixo quando não couberem, adicione flex-wrap: wrap ao contêiner, algo especialmente útil pensando em telas menores (voltaremos a esse ponto no módulo de responsividade).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Complete a navbar com justify-content e align-items.