Envolver elementos no Flexbox em pontos específicos

No layout flexbox, a propriedade flex-wrap permite que os elementos sejam quebrados para a próxima linha quando o a largura do contêiner foi excedida. No entanto, atualmente não existe uma maneira padrão de especificar qual elemento deve acionar o wrap.

Uma solução alternativa para forçar o wrap após um determinado elemento é definir flex-basis como 100% para esse elemento em uma consulta de mídia direcionada ao largura específica. Isso força o elemento a ocupar toda a largura de seu contêiner pai, quebrando efetivamente a linha após ele:

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

Por exemplo, o CSS a seguir agrupará os itens da lista após cada dois itens:

ul {
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(2n) {
  flex-basis: 100%;
}

Este método fornece uma maneira flexível de controlar o comportamento de empacotamento sem exigir marcação adicional. No entanto, é importante observar que ele depende de consultas de mídia, o que pode introduzir sobrecarga e limitações de desempenho em algumas situações.