Estoy buscando una solución para mantener un número (aproximadamente) igual de elementos por fila cuando flexbox se ajusta, para un caso con un número arbitrario de niños. Las respuestas más cercanas que encontré fueron realmente sobre especificar un número fijo de niños por fila en diferentes puntos de interrupción, es decir, si seis (de alguna manera todos los ejemplos son seis) los niños caben en una línea en un determinado punto de interrupción, entonces genial, si no, entonces tres por línea, etc. Sé cómo cambiar los anchos por punto de interrupción, y conozco al menos cuatro formas de codificar un ajuste de línea de caja flexible después de un elemento arbitrario específico, si sé qué elemento interrumpir de antemano.

Sin embargo, este caso es diferente en el sentido de que no puedo saber cuántos hijos tendrá el elemento. Sé que en un cierto punto de ruptura, puedo acomodar hasta cinco seguidos; entonces, si hay cinco hijos, entonces quiero una sola fila, pero si hay seis hijos, entonces quiero dos filas de tres elementos. Si hay ocho, entonces dos filas de cuatro, si son diez, luego dos filas de cinco, a las doce tenemos tres filas de cuatro, etc. (otros números deben terminar con uno menos en la fila inferior; todo está bien. )

Tengo control total sobre el marcado y estoy dispuesto a usar javascript si es necesario (probablemente lo sea). Actualmente no estoy usando jQuery y no quiero agregar un paquete solo para esto, pero puedo hacerlo si es necesario y soy decente para traducir jQuery nuevamente a javascript de vainilla de todos modos, así que adelante y dame una solución jQuery si eso es lo que tienes Tampoco estoy casado con flexbox en principio, pero estoy usando elementos de alineación: estirar para obtener el aspecto que quiero cuando hay un número diferente en la última fila, así que estoy bastante seguro de que la cuadrícula no puede hacer lo que yo desear. Si se acerca, al menos aprenderé algo. Diablos, incluso miraré cosas raras de trucos con flotadores y ancho máximo/mínimo en este punto.