flex-wrap: wrap para hacerlo que quiebre y pase a la siguiente columna igual dar una altura con height para que las columnas conserven la misma simetria
flex-wrap: wrap para hacerlo que quiebre y pase a la siguiente columna igual dar una altura con height para que las columnas conserven la misma simetria
¡Hola Ronald!
Si entendí bien, lo que necesitas es que los elementos de una columna pasen a la siguiente columna cuando no haya más espacio disponible en la primera columna. Para lograr esto, efectivamente puedes utilizar la propiedad "flex-wrap: wrap" en el contenedor que contiene las columnas. Esto hará que los elementos se distribuyan en varias filas y columnas, en lugar de estar en una sola fila.
Respecto a la altura de las columnas, si quieres que todas tengan la misma altura, puedes utilizar la propiedad "align-items: stretch" en el contenedor que contiene las columnas. Esto hará que los elementos se estiren para ocupar toda la altura disponible en cada columna.
Te dejo un ejemplo de código para que puedas entender mejor:
.contenedor {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.columna {
width: 50%;
}
En este ejemplo, el contenedor tiene la propiedad "display: flex" para que se comporte como un contenedor flexible. La propiedad "flex-wrap: wrap" permite que los elementos se distribuyan en varias filas y columnas. La propiedad "align-items: stretch" hace que los elementos se estiren para ocupar toda la altura disponible en cada columna.
Espero que esta respuesta te sea de ayuda. ¡Buenos estudios!