Soy un principiante y estoy aprendiendo de un tutorial usando una API. Me gustaría cambiar el diseño del diseño y, en lugar de tener una columna, me gustaría un diseño de tres columnas. No sé si estoy usando flexbox correctamente.
Intenté usar la fila y luego tener tres columnas, pero de alguna manera no se muestra correctamente. También estoy usando bootstrap.
en primer lugar, necesitamos limpiar su estructura HTML.
dado que en su javascript está agregando todas las tarjetas en una clase "contenedor de imágenes", tenemos que eliminar los divs duplicados.
<div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="images-container"></div> </div> <div class="col-md-4"> <div class="images-container"></div> </div> <div class="col-md-4"> <div class="images-container"></div> </div> </div> </div>y los convirtió en. por lo que solo se agregará a un solo contenedor y hará nuestra flexión allí.
<div class="container-fluid"> <div class="row"> <div class="images-container"></div> </div> </div>El siguiente es CSS, agregué un "envoltura flexible: envoltura" en el "contenedor de imágenes" para que las tarjetas vayan a la siguiente línea cuando no quede espacio.
/* Images Container */ .images-container { width: 100%; margin-top: 50px; display: flex; justify-content: space-between; flex-wrap: wrap; }y dado que está siguiendo los nombres de las clases de arranque, debe agregar consultas de medios en los nombres de las clases con puntos de interrupción, por lo tanto. dice que la tarjeta tomará 12 columnas en xs "pantalla más pequeña" y 4 columnas en pantalla mediana.
.col-xs-12 { width: 100%; } @media onyl screen and (min-width: 767px) { .col-md-4 { width: 33% !important; } }ahora en javascript. ya que tenemos nuestras tarjetas dentro de "images-container". entonces necesitamos agregar el nombre de clase "col-md-4" y "col-xs-12" en la tarjeta directamente para que tenga su propio ancho
// Card Container const card = document.createElement("div"); card.classList.add("card"); card.classList.add("col-md-4"); card.classList.add("col-xs-12");Perdón por la larga explicación, todavía estoy mejorando mis habilidades de explicación, espero que te ayude.