Alineación de elementos en el eje transversal — CSS: Fundamentos de Flex

• ¿Cómo usar align-items?
• align-items: stretch (valor por defecto)
• align-items: flex-start
• align-items: center
• align-items: flex-end
• align-items: baseline

Alinear elementos en el eje transversal es clave para crear diseños equilibrados. Con align-items, podemos controlar su posición dentro del contenedor flexible de forma sencilla y eficiente. Veamos cómo funciona.

¿Cómo usar align-items?

Cuando un elemento es un contenedor flex, sus elementos internos pueden alinearse de diferentes formas en el eje transversal (también llamado eje secundario). Esto se logra con la propiedad align-items.

Para entenderlo mejor, crearemos un contenedor con varios bloques de diferente tamaño dentro:

Ahora veamos los distintos valores que podemos usar en align-items.

align-items: stretch (valor por defecto)

Por defecto, los elementos internos se expanden para ocupar toda la altura disponible dentro del contenedor. Esto ocurre solo si los elementos no tienen una altura establecida manualmente.

.contenedor {
  display: flex;
  align-items: stretch; /* Valor por defecto */
  height: 200px;
  background-color: lightgray;
}

.item {
  flex: 1;
  background-color: lightblue;
  margin: 5px;
}

Si uno de los elementos tiene una altura específica, los demás lo seguirán ajustándose automáticamente.

align-items: flex-start

Con este valor, los elementos se alinean en la parte superior (inicio del eje transversal).

Ejemplo:

align-items: center

Este valor centra los elementos en el eje transversal, sin importar su altura.

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

Ejemplo:

align-items: flex-end

Aquí los elementos se alinean en la parte inferior del contenedor.

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

Ejemplo:

align-items: baseline

Este valor alinea los elementos según la línea base del texto dentro de ellos. Es útil cuando los textos tienen distintos tamaños y queremos que las letras se alineen correctamente.

La siguiente imagen muestra cómo se alinea la línea base:

Ejemplo:

Materiales adicionales

1. Webinar de Códica 🎬 Diseños flexibles con Flexbox