La Propiedad ALIGN-ITEMS

Se utiliza para especificar la alineación de los elementos flexibles (en Flexbox) o los elementos de la cuadrícula (en Grid Layout) a lo largo del eje transversal

La propiedad align-items en CSS se utiliza para especificar la alineación de los elementos flexibles (en Flexbox) o los elementos de la cuadrícula (en Grid Layout) a lo largo del eje transversal (el eje perpendicular al eje principal). En otras palabras, controla cómo se posicionan los elementos dentro de su línea (en Flexbox) o su celda de la cuadrícula (en Grid) en la dirección vertical por defecto.

Sintaxis Básica

La sintaxis básica para usar la propiedad align-items es la siguiente:

CSS
 
.contenedor-flex {
  display: flex;
  align-items: valor;
}

.contenedor-grid {
  display: grid;
  align-items: valor;
}

Donde valor es la forma en la que deseas alinear los elementos.

Valores de la Propiedad align-items

A continuación, exploraremos los diferentes valores que puede tomar la propiedad align-items:

1. stretch

Este es el valor predeterminado. Los elementos se estiran para llenar todo el espacio disponible en el eje transversal del contenedor.

Ejemplo (Flexbox):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-flex {
    display: flex;
    height: 150px; /* Altura fija para ver el efecto */
    border: 1px solid #ccc;
    align-items: stretch; /* Valor por defecto */
  }

  .item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin: 5px;
    width: 80px;
    text-align: center;
    line-height: 30px; /* Para centrar el texto verticalmente dentro del item */
  }
</style>
</head>
<body>

  <div class="contenedor-flex">
    <div class="item">Uno</div>
    <div class="item">Dos<br>con más<br>contenido</div>
    <div class="item">Tres</div>
  </div>

</body>
</html>

En este ejemplo, los elementos flexibles se estirarán verticalmente para tener la misma altura que el contenedor.

Ejemplo (Grid):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-grid {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: 50px; /* Altura de la fila */
    border: 1px solid #ccc;
    align-items: stretch; /* Valor por defecto */
  }

  .item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 50px;
  }
</style>
</head>
<body>

  <div class="contenedor-grid">
    <div class="item">1</div>
    <div class="item">2<br>con más<br>contenido</div>
    <div class="item">3</div>
  </div>

</body>
</html>

Aquí, los elementos de la cuadrícula se estirarán verticalmente para llenar la altura de su celda en la fila.

2. flex-start / start

Los elementos se alinean al inicio del eje transversal de su contenedor.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-items: flex-start; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-items: start; }

3. flex-end / end

Los elementos se alinean al final del eje transversal de su contenedor.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-items: flex-end; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-items: end; }

4. center

Los elementos se centran a lo largo del eje transversal de su contenedor.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-items: center; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-items: center; }

5. baseline

Los elementos se alinean de manera que sus líneas base se alineen. La línea base de un elemento es una línea imaginaria sobre la que descansan la mayoría de las letras (excluyendo las descendentes como en la "g" o la "y").

Ejemplo (Flexbox):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-flex {
    display: flex;
    height: 150px;
    border: 1px solid #ccc;
    align-items: baseline;
    font-size: 20px; /* Para hacer la línea base más visible */
  }

  .item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 10px;
    width: 80px;
    text-align: center;
  }

  .item:nth-child(2) {
    font-size: 30px; /* Diferente tamaño de fuente para variar la línea base */
    padding-bottom: 5px; /* Ajuste para la demostración */
  }
</style>
</head>
<body>

  <div class="contenedor-flex">
    <div class="item">Uno</div>
    <div class="item">Dos</div>
    <div class="item">Tres</div>
  </div>

</body>
</html>

En este ejemplo, la línea base del texto en cada elemento se alinea.

Ejemplo (Grid):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-grid {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: 100px;
    border: 1px solid #ccc;
    align-items: baseline;
    font-size: 20px;
  }

  .item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px;
  }

  .item:nth-child(2) {
    font-size: 30px;
    padding-bottom: 15px;
  }
</style>
</head>
<body>

  <div class="contenedor-grid">
    <div class="item">Uno</div>
    <div class="item">Dos</div>
    <div class="item">Tres</div>
  </div>

</body>
</html>

6. normal

Este es el valor inicial. En Flexbox, se comporta como stretch. En Grid Layout, también se comporta generalmente como stretch para elementos de nivel de bloque.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-items: normal; } /* Equivalente a stretch */

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-items: normal; } /* Equivalente a stretch */

7. first baseline, last baseline

Estos valores especifican la alineación a la línea base de la primera o la última línea base del contenido del elemento, respectivamente. Son similares a baseline pero pueden ser más precisos en ciertos escenarios, especialmente con texto multilínea.

Diferencia entre align-items y align-content (en Flexbox)

Es importante no confundir align-items con align-content en Flexbox:

  • align-items: Alinea los elementos individuales dentro de cada línea de flexión a lo largo del eje transversal.
  • align-content: Alinea las líneas de flexión completas dentro del contenedor a lo largo del eje transversal. align-content solo tiene efecto cuando hay múltiples líneas de elementos flexibles (es decir, cuando se usa flex-wrap: wrap).

La Propiedad align-self

Existe otra propiedad relacionada llamada align-self. Esta propiedad permite anular el valor de align-items para elementos flexibles o de cuadrícula individuales. Los valores que puede tomar align-self son los mismos que los de align-items (stretch, flex-start/start, flex-end/end, center, baseline, first baseline, last baseline, auto (que hereda el valor de align-items)).

Ejemplo (Flexbox con align-self):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-flex {
    display: flex;
    height: 150px;
    border: 1px solid #ccc;
    align-items: flex-start; /* Alineación general al inicio */
  }

  .item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin: 5px;
    width: 80px;
    text-align: center;
    line-height: 30px;
  }

  .item-centrado {
    align-self: center; /* Anula align-items para este elemento */
  }

  .item-final {
    align-self: flex-end; /* Anula align-items para este elemento */
  }
</style>
</head>
<body>

  <div class="contenedor-flex">
    <div class="item">Uno</div>
    <div class="item item-centrado">Dos</div>
    <div class="item item-final">Tres</div>
  </div>

</body>
</html>

En este ejemplo, la mayoría de los elementos se alinean al inicio del contenedor debido a align-items: flex-start;, pero el elemento con la clase item-centrado se centra verticalmente gracias a align-self: center;, y el elemento con la clase item-final se alinea al final con align-self: flex-end;.

Conclusión

La propiedad align-items es fundamental para controlar la alineación vertical de los elementos en contenedores Flexbox y Grid. Comprender sus diferentes valores te permitirá diseñar layouts más flexibles y adaptables a diferentes contenidos y tamaños de pantalla. Recuerda que puedes usar align-self para ajustar la alineación de elementos individuales dentro de un contenedor. ¡Experimenta con los ejemplos y sigue explorando las posibilidades de CSS Flexbox y Grid!