CSS Align-items

La propiedad CSS align-items es utilizada para alinear los elementos dentro de un contenedor flex (elementos con la propiedad display: flex establecida) en el eje transversal, que es el eje vertical (arriba-abajo) por defecto.

Esta propiedad nos permite controlar cómo los elementos hijos se distribuyen dentro del contenedor padre en el eje transversal.

Valores

Los valores posibles son:

  • flex-start: los elementos se alinean al comienzo del contenedor, es decir, arriba.
  • flex-end: los elementos se alinean al final del contenedor, es decir, abajo.
  • center: los elementos se alinean en el centro del contenedor.
  • baseline: los elementos se alinean según la línea base.
  • stretch (valor predeterminado): los elementos se estiran para llenar el contenedor.

Ejemplo de uso

.container { display: flex; align-items: center; }<span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: CSS (css)

En este ejemplo, todos los elementos dentro del contenedor con clase «container» se alinearán en el centro del contenedor en el eje transversal.

En resumen, mientras la propiedad justify-content se utiliza para alinear los elementos en el eje principal, la propiedad align-items se utiliza para alinear los elementos en el eje transversal.

Es importante tener en cuenta que ambas propiedades son complementarias y trabajan de manera conjunta para lograr la distribución deseada de los elementos hijos dentro del contenedor padre.

Más ejemplos:

Aquí te presento algunos ejemplos de cómo se verían los diferentes valores de la propiedad align-items en un contenedor flex:

  • flex-start:
.container { display: flex; align-items: flex-start; }
Lenguaje del código: CSS (css)
  • flex-end:
.container { display: flex; align-items: flex-end; }
Lenguaje del código: CSS (css)
  • center:
.container { display: flex; align-items: center; }
Lenguaje del código: CSS (css)
  • baseline:
.container { display: flex; align-items: baseline; }
Lenguaje del código: CSS (css)
  • stretch (valor predeterminado):
.container { display: flex; align-items: stretch; }
Lenguaje del código: CSS (css)

Ten en cuenta que estos ejemplos son solo una muestra de cómo se ven los diferentes valores de align-items, y que la apariencia final dependerá de otros estilos que se apliquen al contenedor y a los elementos hijos.

Además, es importante mencionar que baseline solo tendrá efecto si los elementos hijos tienen contenido de texto y se debe tener en cuenta el tamaño de la letra y si esta tiene o no decoración (subrayado, tachado, etc.)