Flexbox: como passar para a próxima linha fácil

Flexbox é uma das melhores tecnologias para layouts, mas às vezes quebrar para a próxima linha com Flexbox pode exigir 1 ou 2 macetinhos…

Se você quiser criar um layout Flexbox com várias linhas de itens, como você controla quais itens acabam em qual linha?

Seria um layout parecido com este, com 3 itens empilhados e itens de largura total alternados:

Uma maneira comum de controlar o posicionamento e o tamanho de flex items é usar width ou flex-basis; se o 4º item for definido para ter uma largura de 100%, ele será posicionado em sua própria linha.

Mas, e se não for possível definir a largura de itens individualmente? Ou existe uma maneira de apenas dizer ao flexbox para quebrar de linha em certos pontos?

Não há nenhuma propriedade possível de se definir em um flex item que o faça passar para uma nova linha, mas é possível inserir uma linha collapsed (pense nisso como um <br>) entre 2 flex items para conseguir algo semelhante.

Vamos a alguns cenários (situações que podem ocorrer no dia-a-dia com Flexbox) para quando você quiser usar isso e observar algumas técnicas de layout interessantes que a técnica oferece.

Observe que todos os exemplos de código abaixo exigem e pressupõem que você tenha um flex container com display: flex e flex-wrap: wrap e que flex items sejam adicionados a esse contêiner:

Como quebrar linha depois de um flex item

Usar um elemento para quebrar uma nova flex row vem com um efeito interessante: é possível não especificar a largura de qualquer item no layout e confiar completamente nas quebras de linha para definir o fluxo.

Vamos começar com um exemplo simples. Digamos que temos 2 itens mostrados lado a lado (eles estão definidos para crescer com flex-grow: 1 e não possuem width ou flex-basis definidas):

É possível inserir um elemento de quebra de linha entre os itens para que ambos ocupem 100% do espaço disponível:

Isso produz um layout com 2 itens de largura total empilhados verticalmente (uma borda foi adicionada ao elemento .break para ilustrar sua posição e comportamento):

Como é que isso funciona? Como foi dito, .break deve ocupar 100% da largura do container (flex-basis: 100%), o item flexível de quebra precisa ficar na sua própria linha para conseguir isso.

Não é possível compartilhar uma linha com o primeiro item para que ele seja dividido em uma nova linha, o que deixará o primeiro item sozinho em uma linha.

O primeiro item crescerá então para preencher o espaço restante (flex-grow: 1). A mesma lógica se aplica ao segundo item.

É possível usar essa técnica para, por exemplo, fazer um layout quebrando antes e depois de cada 4ª item:

Basicamente, um item não será quebrado em uma nova linha, a menos que se insira o elemento de breakline:

Novamente, não é preciso especificar a largura em nenhum desses itens. A mesma técnica funcionará para colunas se se tiver um contêiner flexível com flex-direction: column e width (em vez de height) for definida como 0 para o elemento de quebra:

Essa abordagem de usar elementos de quebra de linha para definir um layout definitivamente adiciona algum inchaço e ruído ao HTML, mas pode ser uma ferramenta poderosa quando usada da maneira correta.

É possível usar a técnica, por exemplo, para construir um layout masonry apenas com Flexbox e posicionar as quebras dinamicamente com a propriedade order.

Também, quebrar para uma nova linha sem ter que modificar a largura de qualquer item de conteúdo, sendo possível confiar apenas no flex-grow para distribuir o espaço no layout.

Suponha que você precise fazer este layout:

E suponha que seja preciso fazer isso definindo valores diferentes de flex-grow para distribuir o espaço (em vez de usar flex-basis ou width, que demandariam recálculos assim que se adicionasse ou removesse itens):

Se, em seguida, for preciso adicionar outra linha de itens abaixo dessa:

Não seria possível fazer isso sem recorrer à flex-basis ou width em pelo menos alguns dos itens (ou criar um layout flexbox aninhado com um flex item para cada linha).

Se todos os itens tivessem valores diferentes de flex-grow, nada os faria quebrar em uma nova linha, eles apenas se juntariam em uma só linha:

Interessante, mas não é bem o que resultado procurado. Inserindo-se um elemento de quebra, no entanto, é possível fazer esse layout distribuindo todo o espaço com flex-grow:

Chegando ao layout desejado, com todos os tamanhos definidos proporcionalmente através de flex-grow:

E se houver um cenário em que seja preciso de, digamos, 5 itens na primeira linha, não seria preciso alterar nenhum CSS para alcançar isso.

Bastaria adicionar esses itens antes da quebra de linha:

Tudo o que seria preciso adicionar ao CSS para usar os elementos de quebra de linha seriam essas 2 classes (a única diferença entre elas é que width, e não height, precisaria ser definida como 0 para que o elemento fosse recolhido quando usado em um layout de coluna):

Conclusão

Seria possível, certamente, obter o mesmo efeito ou efeitos similares encaixando flexboxes e tendo um item flexível para cada linha e, em muitos casos, apenas utilizando flex-basis, width ou o conteúdo dentro dos itens flexíveis, seria provavelmente a maneira “preferida” de controlar o fluxo de itens em um layout flexbox.

Mas a inserção de itens flexíveis de quebra de linha é acessível e fácil de criar, funciona e a técnica vem com algumas características únicas que podem ser úteis.

Também, fica a evidente “alternativa” de se usar CSS Grid em alguns casos, mas, em algumas situações, pode ser sim preciso se valer de Flexbox para conseguir esses resultados.

O importante é ter ciência de quais as limitações, vantagens e desvantagens em cada caso concreto de implementação para escolher a tecnologia apropriada à construção do layout (ou porção do layout).