Controle tamanho com flex-basis, grow e shrink

Flexbox não serve apenas para alinhar. Ele também calcula quanto cada item pode crescer ou precisa encolher. Nesta aula, você fará um campo de busca ocupar a sobra sem esmagar o botão ao lado.

Os três controles técnicos são flex-basis, flex-grow e flex-shrink. Imagine uma bancada compartilhada. Cada pessoa começa com uma área combinada; se sobra bancada, algumas podem receber partes extras; se falta, algumas cedem espaço. A área inicial representa basis, a participação na sobra representa grow e a participação na redução representa shrink. O limite é que o algoritmo considera conteúdo, mínimos e máximos; não basta dividir pixels apenas pela soma dos números.

Comece pela base

flex-basis fornece o tamanho inicial no eixo principal:

.campo {
  flex-basis: 16rem;
}

Em uma linha, essa base participa do cálculo da largura. Em uma coluna, participa do cálculo da altura. Ela pode se relacionar com width ou height, mas basis é a entrada própria do algoritmo flexível. Isso torna a intenção explícita: “comece daqui e depois negocie o espaço”.

Reparta a sobra com grow

Com dois itens de mesma base e espaço positivo, os fatores de crescimento definem a proporção da sobra:

.principal {
  flex-grow: 2;
  flex-basis: 12rem;
}

.secundario {
  flex-grow: 1;
  flex-basis: 12rem;
}

O primeiro recebe duas partes da sobra para cada parte recebida pelo segundo. Ele não fica necessariamente com o dobro da largura total, porque ambos já tinham uma base. flex-grow: 0, valor inicial, diz que o item não pede pedaço do espaço positivo.

Compare flex: 1 1 auto com flex: 1 1 0. Com basis auto, o tamanho inicial considera a dimensão principal e o conteúdo; com zero, a repartição começa de uma base flexível zerada. Em cartões de textos diferentes, isso pode produzir larguras distintas no primeiro caso e divisões mais uniformes no segundo.

Decida quem pode encolher

Quando as bases não cabem, flex-shrink entra no cálculo. O valor inicial é 1, então itens podem diminuir. Um botão cujo texto precisa permanecer inteiro pode usar:

.campo {
  flex: 1 1 16rem;
  min-width: 0;
}

.botao {
  flex: 0 0 auto;
}

O atalho flex: 1 1 16rem significa grow 1, shrink 1 e basis 16rem. No botão, 0 0 auto impede crescimento e redução. Use isso com cuidado: se muitos itens se recusarem a encolher, o container transborda.

min-width: 0 resolve outro caso surpreendente. Itens flexíveis têm um mínimo automático ligado ao conteúdo; texto longo pode impedir a redução mesmo quando shrink está ativo. Zerando o mínimo do item que pode comprimir, você permite que o algoritmo use o espaço disponível. Depois trate o texto com quebra ou overflow de forma consciente.

Investigue o erro, não esconda

Um erro comum é declarar width: 100% no campo e então perguntar por que o botão saiu do container. O campo tenta ocupar todo o espaço antes de considerar o vizinho. Outro é usar flex: 1 em tudo e perder quais itens deveriam ser estáveis.

No laboratório, reduza o container, remova min-width: 0 e observe a diferença. Depois aumente a base e escreva o resultado esperado antes de executar. A missão termina quando a busca absorve a sobra, encolhe em tela estreita e os botões continuam legíveis. Explique cada um dos três números do atalho; essa explicação é mais valiosa que decorar flex: 1.