Hemos dado nuestros primeros pasos con Flexbox y hemos visto cómo nos permite organizar elementos de manera horizontal de forma sencilla. Pero, ¿qué pasa cuando queremos alinear nuestros elementos verticalmente?
¡Analicemos un caso práctico!
Imagina que tenemos cuatro cuadrados dentro de un contenedor. Hasta ahora, los hemos colocado uno al lado del otro usando display: flex. Sin embargo, queremos que estén uno encima del otro, formando una columna.
¿Cuál es el truco? La clave está en una propiedad específica de Flexbox: flex-direction. Esta propiedad nos permite controlar el eje principal de nuestro contenedor, es decir, la dirección en la que se distribuyen los elementos hijos. Por defecto, flex-direction es row, lo que significa que los elementos se colocan en una fila horizontal. Para cambiar a una columna, simplemente debemos establecer flex-direction: column.
¡Experimenta y crea diseños increíbles!
Flexbox te ofrece un sinfín de posibilidades para crear diseños personalizados y responsivos. ¡Anímate a explorar las diferentes propiedades y combinaciones para lograr los resultados que deseas!
#CSS #Flexbox #diseñoWeb #desarrolloWeb #webdesign #alineación #vertical #horizontal #flex-direction #aprendizaje #programación
