La alineación de elementos es una parte importante del diseño de una página web, pues determina el balance de la distribución de los elementos en el espacio. Por eso queremos explicarte la propiedad align-content de Flexbox, un sistema de posicionamiento de elementos en CSS relativamente nuevo. Flexbox os ayuda a alinear elementos de una manera más fácil y cómoda que el posicionamiento clásico en CSS.
En nuestro blog puedes encontrar más información acerca de la capacidad de alineación de las propiedades justify-content, align-items y align-self, y para completar este conocimiento, en este post, te presentamos la propiedad align-content de Flexbox, otra forma de alinear los elementos de nuestra página web.
¿Cómo funciona la propiedad align-content de Flexbox?
La propiedad align-content de Flexbox funciona de manera muy similar a la propiedad justify-content en cuanto a las opciones que nos propone. Sin embargo, mientras que justify-content organiza la alineación de los elementos dentro de un contenedor de una sola línea, align-content determina la alineación de las líneas o columnas de elementos del contenedor.
Por esto mismo, esta propiedad solamente funciona si tenemos activada la opción wrap o la opción wrap-reverse en la propiedad flex-wrap de Flexbox, la cual nos permite hacer que los elementos de un contenedor ocupen más de una fila o columna. Además, alinear las filas o columnas requiere que el contenedor tenga espacio sobrante; si no fuera así, no habría necesidad de alinear.
Ten en cuenta que esta propiedad funciona en el eje secundario o transversal del contenedor al igual que la propiedad align-items. Esto quiere decir que, si la propiedad flex-direction está determinada como row, la alineación de align-content impactará en las filas de elementos en su alineación vertical. Del mismo modo, si la propiedad flex-direction está determinada como column, esta propiedad impactará en las columnas de elementos en su alineación horizontal.
A continuación te explicamos cómo funcionan las opciones de la propiedad align-content de Flexbox:
- normal: cuando aplicamos esta opción, los elementos se alinean a su posición por defecto, como si no le hubiéramos dado ningún valor.
- flex-start: alinea las filas o columnas de elementos al inicio del eje transversal.
- flex-end: alinea las filas o columnas de elementos al final del eje transversal.
- center: esta opción centra las filas o columnas de elementos en el eje transversal del contenedor.
- stretch: esta opción hace que las filas o columnas de elementos se alarguen equitativamente para ocupar la totalidad del espacio sobrante en el eje transversal.
- space-between: esta opción reparte el espacio sobrante entre las filas y columnas de elementos. Esto quiere decir que entre las filas o columnas habrá espacios del mismo tamaño.
- space around: este espacio reparte el espacio sobrante y lo distribuye alrededor de las filas o columnas de elementos. Esto quiere decir que, además de agregar espacio entre los elementos, también genera espacio entre los elementos y los bordes del eje transversal.
Si todavía te has quedado con dudas, te aconsejamos visitar el apartado sobre align-content en esta guía completa de Flexbox para completar nuestra información con los diagramas propuestos por CSS Tricks.
Otras opciones
Además de las opciones de alineación que te hemos presentado anteriormente, la propiedad align-content de Flexbox te permite insertar palabras clave junto a cualquiera de las opciones para determinar el comportamiento de la alineación cuando esta afecta a la legibilidad del contenido. A continuación te explicamos las dos palabras clave que puedes añadir:
safe
Al usar esta palabra clave junto a cualquiera de las opciones de alineación, le estamos diciendo al navegador que, cuando la alineación elegida hace que los elementos se salgan del contenedor y se pierdan datos, se ignore la alineación elegida. Esta palabra clave hace que la alineación cambie a ser flex-start, ubicando los elementos al inicio del eje transversal.
unsafe
Esta palabra clave, al emplearla con cualquiera de las opciones de alineación de esta propiedad, determina que la alineación se respetará, aunque los elementos se salgan del contenedor y generen perdida de datos.
¡Anímate a seguir aprendiendo!
Después de leer este artículo sabes todo lo necesario sobre la propiedad align-content de Flexbox y estás listo para empezar a usarla. Pero en KeepCoding sabemos que aprender de una propiedad y practicar con unos cuantos ejercicios online no es suficiente para saciar tu curiosidad. ¡Seguro que quieres integrar todo esto en tu propia página web! Por ello, creemos que nuestro Desarrollo Web Full Stack Bootcamp es perfecto para ti.
En este bootcamp intensivo, además de seguir aprendiendo sobre las posibilidades que los lenguajes de programación web te ofrecen, crearás y diseñarás tu propia página web con ayuda de nuestros profesores, expertos en el sector IT. Al cabo de unos pocos meses, ¡serás un profesional en desarrollo web! ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Anímate a inscribirte y conviértete en un experto del sector tecnológico!
