Al organizar contenido que proviene de una Lista de colección, es posible que notes que las diferentes longitudes del contenido arruinan tu cuadrícula. Por suerte, flexbox te ayuda a solucionar este problema, dándote más control sobre tu diseño, especialmente en diferentes dispositivos.
Este tutorial rápido te mostrará lo fácil que es convertir tus diseños de Lista de colección actuales en una cuadrícula basada en flexbox más fluida.
Paso 1: Configura el diseño de tu Lista de colección a ancho completo
Vamos a dar estilo a tres elementos diferentes a lo largo de este tutorial:
- Contenedor de la Lista de colección
- Lista de colección
- Elemento de colección
Primero, selecciona el Contenedor de la Lista de colección y luego ve a la pestaña de Ajustes.
Luego, establece el diseño a ancho completo. Esto elimina las columnas flotantes aplicadas a tus elementos de colección, permitiendo que cada elemento se extienda a lo largo de su propia fila.
Paso 2: Aplica flex a tu Lista de colección
A continuación, selecciona tu Lista de colección y cambia al panel de Estilos.
Asigna un nombre de clase a tu Lista de colección y luego establece la configuración de visualización en flex. Esto hará que todos tus elementos de colección se agrupen, cada uno en su propia columna, en una sola fila.
Ahora marca la casilla de verificación Ajustar elementos secundarios.
Aprende flexbox de la forma más divertida...
Domina los fundamentos de flexbox a través de 28 niveles cada vez más desafiantes —¡y divertidos!—, sin escribir ni una sola línea de código.
Paso 3: Añade anchos fluidos a tus Elementos de colección
Vamos a darle estilo a esos elementos de la colección. Selecciona el elemento de la colección en el Navegador, ve a la pestaña de Estilos y crea una clase nueva.
A continuación, en la configuración de Flex Child, haz clic en el icono del engranaje para acceder a los ajustes de tamaño avanzado. En el tercer campo, puedes establecer un porcentaje para el ancho de tus columnas.
Puedes configurar tu cuadrícula fluida para que tenga cualquier número de columnas por fila. Por ejemplo:
- 20% = 5 columnas
- 25% = 4 columnas
- 33.3333% = 3 columnas
- 50% = 2 columnas
- 100% = 1 columna
Por último, alterna entre cada punto de interrupción para establecer el ancho adecuado para cada pantalla.
Paso 5: Previsualiza tu trabajo y disfruta
¡Cambia al modo de vista previa y disfruta de tu nuevo diseño, mucho más flexible!
Esta lección explica cómo funciona Flexbox en Webflow y cómo usarlo para crear diseños flexibles basados en CMS que se adaptan perfectamente a cualquier tamaño de pantalla.
