La alineación de los elementos HTML dentro de un contenedor es una de las características que puedes definir cuando estás diseñando su disposición en el espacio. El sistema de disposición de elementos Flexbox hace que determinar esta característica sea mucho más sencillo que con otros sistemas de posicionamiento clásico. Por ello, en este post te enseñaremos cómo modificar la alineación de elementos con la propiedad align-items de Flexbox.
¿Cómo funciona la propiedad align-items de Flexbox?
La propiedad align-items de Flexbox funciona como una contraparte de la propiedad justify-content. Mientras que justify-content determina la alineación de los elementos en el eje principal, esta propiedad lo hace en el eje transversal o secundario. Recuerda que, si no hay un valor determinado en la propiedad flex-direction, el eje principal automático será horizontal de izquierda a derecha, pues el valor por defecto es row.
En este caso, la propiedad align-items de Flexbox nos permitiría alinear los elementos en el eje vertical. Por este motivo es muy importante definir tus ejes con la propiedad flex-direction, pues el diseño de tu página web cambiará completamente dependiendo del sentido definido.
Al igual que justify-content, la propiedad align-items de Flexbox tiene varias opciones. A continuación te presentamos sus funciones.
- flex-start: alinea los elementos hacia el borde inicial del eje secundario. Si este es row, los alinearía con el borde superior del contenedor.
- flex-end: alinea los elementos con el borde final del eje secundario. En el caso de row, sería el borde inferior.
- center: como su propio nombre indica, esta opción centra los elementos en el eje secundario.
- stretch: esta opción hace que los elementos ocupen todo el espacio del eje secundario. Si tenemos el valor por defecto de eje, los elementos se alargarían al alto total de su contenedor, pues el eje vertical es el eje transversal.
- baseline: esta opción hace que los elementos se compriman al tamaño de texto y se dispongan teniendo como base la línea inferior del texto. Esto hace que elementos de distintos tamaños se posicionen en función de la misma medida inicial, creando orden dentro del caos. Con esta opción podrías, por ejemplo, hacer un cuadro de Mondrian.
Te invitamos a leer la guía completa de Flexbox para profundizar en el tema, ya que en ella encontrarás un diagrama para cada una de las opciones de la propiedad align-items de Flexbox.
En KeepCoding, sabemos que la curiosidad no se sacia con conocer solo unas cuantas propiedades. Además, ¡seguro que quieres ponerlas en práctica! Ahora que sabes cómo funciona la propiedad align-items de Flexbox, es hora de que la explores en tu propia página web. Por ello, te invitamos a nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde encontrarás la mezcla perfecta de teoría y práctica. En el transcurso del bootcamp, no solo seguirás aprendiendo sobre los lenguajes de programación para el desarrollo web, sino que también crearás y diseñarás tu propia página web con ayuda de nuestros profesores. ¡No te lo pierdas y apúntate!
