CSS ganha flex-wrap: balance para distribuir itens sem órfãos

{ "resumo": "## O problema do item órfão\n\nAo usar flexbox com quebra de linha habilitada, é comum surgir o chamado item órfão: quando os elementos quebram para uma nova linha, o último acaba sozinho nela. Esse comportamento costuma levar designers e desenvolvedores a recorrer a media queries para contorná-lo, solução que o texto considera pouco confiável, porque quebra facilmente se o conteúdo mudar. Uma lista simples de navegação, com display: flex, flex-wrap: wrap, justify-content: center e espaçamento entre itens, já demonstra o último elemento isolado.\n\nA novidade que ataca esse problema é flex-wrap: balance, lançado no Chrome 150, que produz uma distribuição mais equilibrada. Como ainda funciona só nesse navegador, o autor primeiro mostra soluções alternativas antes de apresentar a propriedade nova.\n\n## Um caso real e quatro soluções alternativas\n\nO exemplo real vem da seção de conexão de redes sociais da Buffer.com, que une título e lista de ícones. Ao redimensionar a janela, o layout quebra: o contêiner dos ícones usa justify-content: space-between, e eles acabam em linhas com dois ícones muito distantes entre si - algo que, segundo o autor, não parece intencional. Ele replicou a seção e testou correções:\n\n1. Container queries: centralizar os ícones e calcular a largura somando cada canal mais o espaçamento; quando a largura do contêiner fica abaixo desse valor, aplica-se um max-width que limita a cinco itens por linha pré-definidos, liberando o limite acima disso. Funciona em qualquer navegador com suporte a container queries.\n2. max-width com clamp condicional: usando as mesmas informações conhecidas de antemão (canal de 44px, espaçamento, total de itens e itens por linha), calcula-se a largura mínima e aplica-se um clamp() sobre unidades do contêiner (100cqw) para derivar o máximo.\n3. display: contents: dividir os itens em dois grupos; em tamanhos menores, os grupos deixam de formar caixas com display: contents, e em tamanhos maiores voltam a aparecer, imitando a quebra equilibrada. Funciona, mas não é a solução favorita do autor, embora ele a julgue melhor que depender só de space-between.\n4. Pseudo-elemento intermediário: inserir um pseudo-elemento que ocupa toda a largura, posicionado no meio da lista com a propriedade order. Essa abordagem não funcionou bem, mas foi mostrada mesmo assim.\n\nApós essas tentativas, chega a quinta solução: trocar wrap por balance, mantendo o restante do código igual.\n\n## flex-line-count e novos casos de uso\n\nPesquisando o tema, o autor encontrou outra propriedade nova, flex-line-count, que define um número mínimo de linhas para os itens quebrados: mesmo havendo espaço suficiente para tudo caber em uma linha, é possível forçar ao menos duas. Ele enxerga ali usos antes inviáveis.\n\nEm uma demo de navegação de café, a meta era manter a lista de links sempre em duas linhas. O caminho clássico seria restringir a lista com max-width, mas isso impossibilita estilizar o contêiner externo - um plano de fundo, por exemplo, ficaria limitado à largura máxima. Com flex-line-count, a quebra ocorre sem alterar a largura original.\n\nNo experimento de layout masonry, também dá para definir colunas pelo número de linhas mínimas. Em versões iniciais, contudo, o número de colunas permanece fixo ao redimensionar, deixando os itens muito pequenos. A solução combinou container queries, a divisão da largura do contêiner pela largura do cartão e as funções round(down) e clamp para obter o inteiro mais próximo, com limite de quatro. O autor adverte que, nesse teste, a ordem de leitura não coincide com a visual.\n\nNa conclusão, ele afirma pretender usar bastante a quebra equilibrada e diz ter se surpreendido positivamente com flex-line-count.", "hook": "Quando os itens de uma lista em flexbox quebram de linha, o último pode acabar sozinho, um órfão que normalmente se tenta evitar com media queries fáceis de romper. O flex-wrap: balance, disponível no Chrome 150, promete resolver isso, mas o problema pode ser mitigado hoje com técnicas como container queries e clamp condicional. Nessa mesma investigação aparece flex-line-count, capaz de impor um número mínimo de linhas até quando não há necessidade de quebra.", "entities": ["Chrome"], "themes": ["engenharia-de-software"], "story_key": "css-flex-wrap-balance", "reasoning": { "story_key": "O fato canônico é a chegada e a aplicação prática de flex-wrap: balance no Chrome 150, com Flex line-count como desdobramento secundário.", "themes": { "engenharia-de-software": "Artigo técnico sobre CSS puro - craft clássico de front-end, linguagem e layout, sem IA como assunto e sem caber em design-e-ux por não tratar de design systems ou tipografia." }, "entities": { "Chrome": "Navegador onde flex-wrap: balance é lançado (versão 150); único sujeito concreto do fato." }, "excluded": { "Ahmad Shadeed": "Autor do artigo, excluído por regra.", "Buffer.com": "Usado apenas como exemplo real replicado, menção secundária, não sujeito.", "The Layout Maestro": "Curso promovido pelo autor no rodapé, conteúdo promocional irrelevante ao fato.", "CSS": "Categoria técnica genérica, não entidade sujeita ao fato." } } }