align-items

align-items controla cómo se posicionan los ítems flex a lo largo del eje cruzado — el eje perpendicular al eje principal definido por flex-direction. Mientras justify-content distribuye el espacio en la dirección donde fluyen los ítems, align-items los alinea en la dirección perpendicular: verticalmente si los ítems están en fila, horizontalmente si están en columna.

El valor por defecto es stretch, que hace que todos los ítems se estiren para ocupar toda la altura disponible del contenedor (o el ancho, si el eje cruzado es horizontal). Este comportamiento es el que permite que las tarjetas de una fila tengan la misma altura sin declarar nada — es Flexbox resolviendo el problema automáticamente.

align-items actúa sobre todos los ítems a la vez, dentro de su línea respectiva. Si se quiere alinear un único ítem de forma diferente, la propiedad del ítem individual align-self anula align-items para ese elemento específico (cubierta en la tanda de ítems).

La diferencia con align-content es fundamental: align-items alinea ítems dentro de una sola línea; align-content distribuye el espacio entre múltiples líneas cuando hay flex-wrap: wrap. En un contenedor de una sola línea, align-content no tiene efecto y align-items es el que manda.

Cómo funciona

El eje cruzado tiene un tamaño que depende del contenedor: si los ítems están en row, el eje cruzado es la altura del contenedor (que puede estar fijada explícitamente o determinada por el ítem más alto). align-items distribuye los ítems dentro de ese espacio perpendicular.

Para que el efecto sea visible en flex-direction: row, el contenedor necesita una altura mayor que la de sus ítems — si no hay espacio vertical libre, no hay nada que alinear. El caso típico donde se ve claramente es centrar vertical y horizontalmente en un hero o modal.

Sintaxis

.contenedor {
  display: flex;
  align-items: stretch;      /* valor por defecto */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
}

Valores

stretch (valor por defecto)

Los ítems se estiran para ocupar toda la dimensión del eje cruzado disponible en su línea. Si el contenedor tiene height: 300px y los ítems están en row, todos los ítems tendrán 300px de altura (salvo que tengan su propio height declarado, que tiene prioridad).

Cuándo usarlo: columnas de igual altura en una fila de tarjetas, layout donde todos los ítems deben ocupar el mismo espacio vertical.

Gotcha: si un ítem tiene height declarado, stretch no lo sobreescribe. El ítem usa su propia altura y el resto se estira.

flex-start

Los ítems se alinean al inicio del eje cruzado (cross-start). Con row, se agrupan en la parte superior; con column, al borde izquierdo. Cada ítem tiene su tamaño natural en el eje cruzado — no se estiran.

Cuándo usarlo: cuando los ítems tienen alturas diferentes y se quiere que todos se alineen por la parte superior.

flex-end

Los ítems se alinean al final del eje cruzado (cross-end). Con row, se agrupan en la parte inferior; con column, al borde derecho.

Cuándo usarlo: colocar ítems en la parte inferior de un contenedor con altura definida.

center

Los ítems se centran en el eje cruzado. Con row, se centran verticalmente; con column, se centran horizontalmente. Combinado con justify-content: center, produce el centrado perfecto en ambas dimensiones — el dúo más usado en CSS moderno.

Cuándo usarlo: centrar contenido dentro de un hero, modal, botón o cualquier contenedor con dimensiones definidas.

baseline

Los ítems se alinean de forma que sus líneas base de texto (la línea imaginaria sobre la que descansan las letras) queden alineadas entre sí. Útil cuando los ítems tienen tamaños de fuente diferentes y se quiere que el texto fluya visualmente en la misma línea imaginaria.

Cuándo usarlo: grupos de ítems con textos de diferentes tamaños donde la coherencia visual del texto es importante.

Ejemplo realista

/* Centrado perfecto en dos ejes */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background: #dbeafe;
}

/* Tarjetas en fila que se estiran al mismo alto */
.galeria {
  display: flex;
  align-items: stretch; /* default — todas las tarjetas al mismo alto */
  gap: 16px;
}

Cuándo usar cada valor

Notas, gotchas e interacción

• Para ver el efecto, el contenedor necesita más espacio que los ítems en el eje cruzado. Con row, si el contenedor no tiene altura explícita (o si la altura es exactamente la del ítem más alto), align-items: center o flex-end no se nota porque no hay espacio sobrante.
• align-self anula align-items por ítem. Si un ítem específico necesita alineación diferente al resto, align-self en ese ítem sobreescribe align-items del contenedor. Se cubre en la tanda de ítems (tanda 17).
• stretch no sobreescribe height/width declarado. Si un ítem tiene height: 50px, ese alto se respeta incluso con align-items: stretch.
• align-items aplica por línea, no al contenedor entero. Con flex-wrap: wrap, align-items alinea los ítems dentro de su línea individual. Para distribuir el espacio entre las líneas, se usa align-content.
• El eje cruzado cambia con flex-direction. Con column, align-items: center centra horizontalmente — no verticalmente. La propiedad no es “la que centra verticalmente”: es la que actúa sobre el eje cruzado, sea cual sea.

Vigente / legacy

align-items es parte del módulo Flexbox Level 1, ampliamente soportado. No hay alternativa legacy para el alineamiento cruzado de ítems — antes de Flexbox, centrar verticalmente requería hacks con line-height, display: table-cell o posicionamiento absoluto. No se necesitan prefijos de vendor en proyectos modernos.