Align-items en CSS: Cómo alinear los elementos verticalmente

A menudo, me encuentro con algún estudiante frustrado porque no consigue alinear los elementos de su diseño web. Lo primero que siempre les digo es que comprendo su frustración, ya que a mí (y me atrevería a decir que a la mayoría de los desarrolladores) me ha pasado. La primera vez que trabajé con flexbox y grid me sentía jugando a un juego del que no conocía las instrucciones, hasta que conocí las diferentes funciones para controlar la alineación de los elementos, entre ellas, align-items. 

En este artículo te contaré qué es align-items en CSS, para qué sirve, cuál es su sintaxis, y te mostraré ejemplos prácticos para que tú también puedas ahorrarte las frustraciones.

¿Qué es align-items en CSS?

Align-items es una propiedad en CSS que controla la alineación vertical de los elementos dentro de un contenedor. Funciona tanto en flexbox como en CSS grid, lo que te permite ajustar la forma en que se colocan los elementos a lo largo del eje cruzado, es decir, el eje perpendicular al principal.

Básicamente, al usar CSS Grid Layout en tu diseño, la propiedad align-items se encarga de alinear verticalmente todos los elementos dentro de sus celdas para mantener una disposición uniforme y organizada a lo largo del eje vertical. De esta manera, te aseguras de que cada elemento esté correctamente alineado en su posición vertical dentro de la cuadrícula.

¿Para qué sirve align-items?

Como venía diciendo, la propiedad align-items es súper útil cuando necesitas controlar la posición vertical de los elementos en un diseño. A continuación, voy a mostrarte algunos de sus principales usos:

1. Alinear elementos: Cuando trabajas con flexbox o grid, usar esta propiedad te ayuda a mantener los elementos ordenados y con un espaciado consistente en el eje vertical.
2. Lograr diseños centrados verticalmente: Si alguna vez has luchado para centrar algo en CSS (y admitámoslo, todos hemos estado ahí), esta propiedad te permite centrar los elementos verticalmente con facilidad, haciendo que tu diseño se vea más profesional y equilibrado.
3. Simplificar el código: No hace falta usar márgenes y padding para ajustar las posiciones, ya que puedes aplicar align-items en el contenedor para alinear todos los elementos al mismo tiempo.

Sintaxis de align-items

En cuanto a la sintaxis, podemos decir que es bastante directa:

align-items: flex-start | flex-end | center | baseline | stretch;

Valores comunes

Luego, puedes utilizar diferentes valores según la forma en que esperas que se ajusten verticalmente los elementos dentro de la cuadrícula. Para esto, tenemos los siguientes:

• flex-start: Los elementos se alinean al inicio del contenedor.
• flex-end: Los elementos se alinean al final del contenedor.
• center: Los elementos se centran verticalmente.
• baseline: Los elementos se alinean según su línea base de texto.
• stretch: Este es el valor por defecto, donde los elementos se expanden para ocupar el espacio vertical completo.

Ejemplos de align-items

Ahora, voy a mostrarte un par de ejemplos que te pueden ayudar a comprender cómo puedes utilizar esta propiedad.

Centrar elementos verticalmente

Supongamos que tienes un contenedor con flexbox y quieres que todo esté centrado verticalmente. Puedes hacer lo siguiente:

<div class="flex-container">
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
</div>

<style>
  .flex-container {
    display: flex;
    align-items: center;
    height: 200px;
    background-color: lightgrey;
  }

  .item {
    padding: 10px;
    background-color: lightblue;
  }
</style>

En este ejemplo, align-items: center; asegura que todos los elementos estén perfectamente centrados en el eje vertical.

Usar stretch para ocupar todo el espacio

Si quieres que los elementos se estiren para llenar el espacio disponible, esto es lo que necesitas:

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .flex-container {
    display: flex;
    align-items: stretch;
    height: 200px;
    gap: 10px;
  }

  .item {
    background-color: lightgreen;
    text-align: center;
  }
</style>

Aquí, los elementos ajustan su altura para llenar el contenedor, gracias a align-items: stretch;.

¿Cuál es la diferencia entre align-items y otras propiedades similares?

Al hablar de las propiedades que se utilizan para alinear los elementos en CSS, muchas personas pueden confundirse al no saber reconocer sus diferencias. Para evitar esto, te traigo una breve explicación de cada una de estas propiedades:

Propiedad	Función
align-items	Alinea todos los elementos hijos verticalmente dentro de sus celdas.
justify-items	Se centra exclusivamente en alinear horizontalmente los elementos dentro de sus celdas.
justify-content	Alinea y distribuye el espacio de toda la cuadrícula dentro de su contenedor horizontalmente.

Como puedes ver, align-items y justiy-items son funciones similares en cuanto sirven para alinear los elementos en determinada posición dentro de las celdas, pero se diferencian en que la primera aplica para el eje vertical, mientras que la segunda funciona en el eje horizontal.

Recomendaciones al usar align-items

Ciertamente, podemos aprovechar mejor las propiedades cuando sabemos aplicarlas correctamente. Por esta razón, quiero darte algunos consejos que puedes tener en consideración al momento de implementar esta propiedad:

1. Elige el valor correcto según el diseño: No hace falta que siempre utilices stretch; en ocasiones, es más conveniente usar valores center o flex-start. No tengas miedo de probar diferentes valores para encontrar el más adecuado.
2. Combina con otras propiedades de alineación: Puedes usar align-items con propiedades como justify-content para lograr un control total sobre la distribución de los elementos.
3. Prueba en diferentes pantallas: Lo ideal es que tu diseño se vea bien en dispositivos con distintos tamaños. Por eso, asegúrate de que tu diseño sea responsivo para garantizar siempre una buena experiencia.

Como has podido ver, align-items en CSS facilita la alineación vertical de los elementos en contenedores flexibles, por lo que puedes escoger entre una variedad de posibilidades, como centrar los elementos o estirarlos para llenar el espacio disponible. Con los ejemplos y consejos que te compartí, ahora tienes lo necesario para usarla con confianza.

Si quieres continuar aprendiendo y mejorando tus habilidades, nuestro Bootcamp en Desarrollo Web es para ti. Nuestro programa está diseñado para que aprendas a crear proyectos web funcionales, modernos y optimizados. Empieza ahora y abre las puertas a una vida laboral llena de grandes oportunidades y salarios inigualables.

¡Transforma tu carrera con el desarrollo web!