Propiedad align-items de Flexbox

Autor: | Última modificación: 20 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

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 Flexbox?

Para entender la lógica detrás de la alineación de la propiedad align-items de Flexbox, primero tenemos que entender la metodología de este sistema.

Flexbox es un sistema de disposición de elementos que consta de un contenedor que tiene elementos HTML dentro. Ese contenedor tiene dos ejes basados en las dos dimensiones de la pantalla. El contenedor consta, por tanto, de un eje principal y un eje transversal o secundario. A diferencia de otros sistemas, en Flexbox no hablamos de ejes x o y, porque podemos hacer que cualquiera de estos dos sea el eje principal gracias al uso de la propiedad flex-direction.

¿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.

¿Qué sigue?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!