Expansão, redução e base do Flex

Por padrão, os elementos filhos flex têm seu tamanho definido de acordo com o conteúdo. Porém, o Flexbox oferece três propriedades que permitem controlar com precisão como os elementos filhos preenchem o espaço disponível: flex-grow controla quanto espaço adicional um elemento filho ocupa, flex-shrink controla quanto ele é comprimido quando o espaço é limitado e flex-basis define o tamanho inicial antes do crescimento ou da redução. O Tailwind disponibiliza as três por meio de classes utilitárias concisas.

flex-1 é a utilidade de dimensionamento flex mais usada. Ela aplica flex: 1 1 0% — cresce para preencher o espaço disponível, encolhe quando necessário e começa com uma base zero. Na prática, flex-1 faz com que cada item ocupe uma parcela igual do espaço restante do contêiner. Dois elementos irmãos com flex-1 ocupam 50% cada; três ocupam 33% cada.

flex-auto aplica flex: 1 1 auto — o elemento cresce e encolhe, mas começa com o tamanho natural do conteúdo. Ao contrário de flex-1, que começa em zero, flex-auto preserva a diferença de tamanho entre os itens antes de distribuir proporcionalmente o espaço adicional. Use-o quando quiser uma distribuição baseada no conteúdo em vez de divisões iguais.

flex-initial aplica flex: 0 1 auto — o comportamento padrão do navegador. Os itens não crescem além do tamanho do conteúdo (grow: 0), mas encolhem quando o espaço é limitado (shrink: 1). Isso é usado para declarar explicitamente o padrão em um contexto no qual os itens irmãos usam flex-1, mantendo o item inicial dimensionado de acordo com seu conteúdo enquanto os irmãos ocupam o espaço restante.

flex-none aplica flex: none — o item não cresce para preencher espaço adicional nem encolhe quando o espaço é limitado. Ele permanece sempre exatamente com o tamanho natural do conteúdo. Use flex-none para ícones, avatares, selos e elementos com largura fixa que devem manter seu tamanho independentemente do espaço disponível no contêiner flex.

Para um controle mais detalhado, o Tailwind oferece as utilidades separadas grow, grow-0, shrink e shrink-0. grow permite que o item cresça (flex-grow: 1). grow-0 impede o crescimento. shrink permite a redução (flex-shrink: 1). shrink-0 impede a redução — é útil para evitar que imagens e ícones sejam comprimidos quando o contêiner é estreito demais.

basis-* define o tamanho inicial de um item flex antes do crescimento ou da redução. Ele corresponde a CSS flex-basis. Você pode usar valores de espaçamento do Tailwind (basis-4 = 16px), valores percentuais (basis-1/2 = 50%) ou valores de palavra-chave (basis-full = 100%). Definir basis-1/3 em três elementos irmãos com grow cria uma estrutura de três colunas que começa com terços iguais e preenche o espaço disponível.

basis-0 e basis-auto produzem resultados sutilmente diferentes quando combinados com grow. Com basis-0, todos os itens começam com largura zero e crescem puramente com base nas proporções de flex-grow, resultando em uma distribuição igual do espaço. Com basis-auto, os itens ocupam primeiro a largura do conteúdo e, depois, o espaço adicional é distribuído, resultando em uma distribuição proporcional ao conteúdo.

Uma estrutura clássica de dois painéis usa flex-none w-64 na barra lateral (largura fixa de 256px) e flex-1 na área de conteúdo principal (ocupa todo o restante). Isso cria uma barra lateral que nunca cresce nem encolhe, combinada com uma área de conteúdo que preenche 100% do espaço restante. Essa é a base das estruturas de painéis e interfaces administrativas.

Combinar flex flex-wrap com flex-1 e uma restrição min-w-* cria uma grade responsiva que ajusta automaticamente o número de colunas de acordo com a largura disponível. Cada cartão ocupa pelo menos a largura min-w-64 e se expande para preencher a linha com flex-1. Quando um cartão não cabe, ele passa para a linha seguinte — sem necessidade de gerenciar pontos de quebra explicitamente.

As utilidades order-* do Tailwind alteram a ordem visual de exibição dos itens flex sem mudar a ordem deles no DOM. order-first move um item para o início, order-last move-o para o fim e order-1 até order-12 oferecem um controle detalhado. Isso é útil para reorganização responsiva: uma barra lateral que aparece depois do conteúdo em dispositivos móveis pode ser movida visualmente para antes dele em telas grandes com md:order-first.

Nesta lição, você aprendeu: flex-1 faz com que os elementos filhos ocupem parcelas iguais do espaço disponível, flex-none impede que um item cresça ou encolha, mantendo-o em seu tamanho natural e grow, shrink e basis-* oferecem controle detalhado sobre cada dimensão separadamente. A seguir, você aprenderá a lidar com o excesso de conteúdo usando flex-wrap e a criar espaçamentos consistentes entre os itens flex.