Guión:
Usando flexbox, estoy creando una plantilla donde la cantidad de 'tarjetas' que se muestran puede cambiar de una página a otra. Si un usuario agrega 2, 3 o 4 tarjetas, el diseño es excelente.
Sin embargo, si un usuario agrega 5 tarjetas, el diseño ahora es menos agradable estéticamente con la 5.ª tarjeta sola en una nueva fila.
¿Hay alguna manera de mostrar hasta 4 cartas en una fila, pero si hay más de 5 cartas... entonces la primera fila mostraría 3 cartas y la segunda fila mostraría 2?
Aquí hay una idea general de cómo se mostraría el código.
<style> .cards-wrapper { display: flex; flex-wrap: wrap; } .cards-wrapper .card { flex: 1 1 20%; margin: 10px; } </style> <div class="cards-wrapper"> <div class="card"> </div> <div class="card"> </div> <div class="card"> </div> <div class="card"> </div> <div class="card"> </div> </div>Puede combinar nth-child y nth-last-child .
.cards-wrapper { display: flex; flex-wrap: wrap; gap: 10px; } .cards-wrapper .card { flex: 1 1 calc(25% - 10px); } .card:nth-child(1):nth-last-child(5), .card:nth-child(2):nth-last-child(4), .card:nth-child(3):nth-last-child(3) { flex-basis: calc(33.333% - 10px); }El truco funciona para 5 elementos (el noveno se quedaría solo en la última fila). Sin embargo, esta no es una solución elegante. En este caso, recomendaría usar CSS grid en lugar de flexbox.
Esto es lo que haría. Puede crear dos clases en función del número de elementos. Cuente la cantidad de elementos (si está utilizando un lenguaje de fondo o también con javascript). Hacer el diseño automáticamente en función de los elementos generalmente se realiza con los idiomas de backend o javascript.
uno con esto (quitar los márgenes)
flex: 0 1 33.3333%;y una clase con
flex: 0 1 25%;También puede darles un ancho en línea según la cantidad de elementos.
Puede lograr esto con Bootstrap si puede usar esto. https://getbootstrap.com/docs/4.1/layout/grid/#all-breakpoints
Bootstrap viene con los puntos de interrupción ya definidos, por lo que le asigna la clase específica que necesita en función del tamaño de la pantalla col-lg-3 (en una pantalla grande, la columna abarcará 3)