Propiedad CSS align-items

La propiedad CSS align-items establece la alineación predeterminada para los elementos flex (y los elementos de cuadrícula) a lo largo del eje transversal de su contenedor. Es la contraparte en el eje transversal de justify-content, que alinea los elementos a lo largo del eje principal.

Esta página explica qué es el eje transversal, recorre cada valor con un ejemplo ejecutable y muestra cómo align-items se relaciona con align-self y align-content.

Entendiendo el eje transversal

En un contenedor flex, el eje principal es la dirección en la que fluyen los elementos, establecida por flex-direction. El eje transversal corre perpendicular a él:

flex-direction: row (el valor predeterminado) → el eje principal es horizontal, por lo que el eje transversal es vertical, y align-items controla la alineación vertical.
flex-direction: column → el eje principal es vertical, por lo que el eje transversal es horizontal, y align-items controla la alineación horizontal.

Dado que el eje depende de flex-direction, se usan nombres como flex-start y flex-end en lugar de top/bottom — siempre significan "inicio del eje transversal" y "fin del eje transversal" sin importar la dirección.

Nota: align-items solo se aplica a contenedores flex y de cuadrícula — no tiene efecto en un elemento con el display: block predeterminado. Primero establece display: flex (o display: grid) en el padre.

Cuándo usarlo

El caso de uso clásico es el centrado vertical: display: flex; align-items: center centra los hijos verticalmente sin márgenes ni posicionamiento absoluto. Combínalo con justify-content: center para centrar un elemento en ambos ejes — el longevo problema de "centrar un div" resuelto en dos líneas.

align-items vs. align-self vs. align-content

align-items se establece en el contenedor y controla la alineación predeterminada en el eje transversal de todos los elementos.
align-self se establece en un elemento individual para anular el align-items del contenedor solo para ese elemento.
align-content alinea las filas como grupo cuando el contenedor flex tiene múltiples líneas (flex-wrap: wrap). Con una sola línea no tiene efecto — ese es el momento en que se recurre a align-items.

Esta propiedad es una de las propiedades CSS3.

La propiedad align-items acepta los siguientes valores:

stretch
flex-start
center
flex-end
baseline

Valor inicial	stretch
Se aplica a	Contenedores flex y de cuadrícula.
Heredada	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.alignItems = "center";

Sintaxis

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

Ejemplos

stretch (predeterminado)

Con stretch, los elementos crecen para llenar el tamaño completo del eje transversal del contenedor (en este caso, la altura total), siempre que no tengan una altura fija propia.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: stretch;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

center

Los elementos se posicionan en el centro del eje transversal (centrados verticalmente en este caso).

Ejemplo de la propiedad CSS align-items con el valor center

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: center;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

flex-start

Los elementos se colocan al inicio del eje transversal (en la parte superior, con el flex-direction: row predeterminado).

Ejemplo de la propiedad CSS align-items con el valor flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-start;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

flex-end

Los elementos se colocan al final del eje transversal (en la parte inferior, con el flex-direction: row predeterminado).

Ejemplo de la propiedad CSS align-items con el valor flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-end;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

baseline

Los elementos se alinean de modo que sus líneas de base de texto queden alineadas. Esto es útil cuando los elementos contienen texto de diferentes tamaños de fuente y se desea que las letras se sitúen en una línea común.

Ejemplo de la propiedad CSS align-items con el valor baseline

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: baseline;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: baseline; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
stretch	Hace que los elementos se estiren para ajustarse al contenedor. Este es el valor predeterminado de esta propiedad.	Pruébalo »
center	Los elementos se colocan en el centro del contenedor.	Pruébalo »
flex-start	Los elementos se colocan al inicio del contenedor.	Pruébalo »
flex-end	Los elementos se colocan al final del contenedor.	Pruébalo »
baseline	Los elementos se posicionan en la línea de base del contenedor.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Errores comunes

stretch no hace nada si los elementos tienen un tamaño fijo en el eje transversal. Si un elemento ya tiene un height (en un contenedor de fila), stretch no puede expandirlo. Elimina el tamaño fijo para permitir que se estire.
Nada ocurre sin un contenedor flex/grid. align-items se ignora a menos que el padre tenga display: flex o display: grid.
El eje cambia con flex-direction: column. Entonces align-items controla la alineación horizontal, no la vertical.
Para alinear solo un elemento, usa align-self en ese elemento en lugar de cambiar todo el contenedor.

Propiedades relacionadas

justify-content — alineación a lo largo del eje principal.
align-self — anula align-items para un elemento individual.
align-content — alinea las líneas envueltas como grupo.
flex-direction — elige cuál eje es el principal.

Práctica

¿Cuáles son los posibles valores de la propiedad 'align-items' en CSS?