Chris Albrecht publicó una pregunta en StackOverflow sobre cuadrículas. Esencialmente: imagina que tienes un elemento con un número desconocido de hijos. Cada uno de esos hijos tiene un porcentaje del ancho del padre, de modo que forman filas iguales, como 25% de ancho cada una para cuatro columnas, 33.33% de ancho cada una para tres columnas, etc. El objetivo es llenar el espacio de esta “cuadrícula”. igualmente. Hay un número desconocido de niños, así que digamos que vas con el 25% y había 7 niños, serían 4 en la primera fila y 3 en la segunda. Chris necesitaba que los últimos 3 se ajustaran en ancho para llenar el espacio, en lugar de dejar el espacio.
Flexbox tiene la respuesta para esto, que de otro modo probablemente tendría que ser una intervención de JavaScript.
La solución es esencialmente hacer que los niños puedan envolverse con flex-wrap, y luego llenando el espacio con flex-grow.
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
flex-grow: 1;
min-width: 25%;
}Aquí hay un ejemplo visual de eso cuando cada elemento de la cuadrícula es rojo y está separado por un borde:
Al ajustar el ancho mínimo en diferentes puntos de interrupción de consulta @media, puede hacer que responda con bastante facilidad:
.grid-item {
flex-grow: 1;
min-width: 25%;
}
@media (max-width: 1200px) {
.grid-item {
min-width: 33.33%;
}
}
Aquí está esa demostración:
Consulte Pen Wrapping Flexbox with Media Query Widths de Chris Coyier (@chriscoyier) en CodePen.
Si te gusta oponerte a flexbox por no estar listo para usar todavía, este ejemplo es para ti. flex-wrap no estaba en Firefox en absoluto hasta hace muy poco, y aún no está estable, por lo que probablemente no sea una solución súper práctica para Chris todavía. Pero recuerda que Firefox se actualiza automáticamente, así que cuando se lance el 28, todos lo tendrán bastante rápido. Todavía soy optimista de que flexbox será un mecanismo de diseño bastante estándar en nuevos sitios dentro de un año más o menos.
Si solo necesita flexbox para cosas unidireccionales, recurra a display: table es a veces una opción, si por respaldo quiere decir replicar el diseño con cierta precisión. Si necesita el envoltorio, el bloque en línea podría funcionar. Puede probar el soporte de envoltura de flexbox con:
@supports not (flex-wrap: wrap) {
}Y posiblemente volver a inline-block (sin espacio entre ellos) Si lo hizo, así es como puede ajustar esa última fila si es necesario con JavaScript:
var leftovers = $(".child").removeAttr("style").length % 4;
if (leftovers > 0) {
var newWidth = 100 / leftovers;
var fromHere = $(".child").length - leftovers + 1;
$(".child:nth-child(n+" + fromHere + ")").css("width", newWidth + "%");
}Tenga en cuenta el 4 codificado allí, que supone un 25% de niños. Podrías volverte más elegante y detectar eso. Te lo dejo a ti. Seleccionando los últimos rezagados (determinados por ese operador de módulo (%)) lo hice con un poco de una receta de :nth-child. Sin embargo, aquí hay una demostración:
Consulte Pen Wrapping Flexbox with Media Query Widths de Chris Coyier (@chriscoyier) en CodePen.
Recuerde que aquí hay una gran guía de todas las propiedades de flexbox.