La propiedad align-items en Flexbox se usa para alinear los elementos flexibles a lo largo del eje cruzado del contenedor Flex. Esta propiedad es especialmente útil para controlar la alineación vertical de los elementos cuando el eje principal es horizontal (y viceversa).

Valores de align-items

1. stretch (por defecto): Los elementos se estiran para llenar el contenedor a lo largo del eje cruzado.
2. flex-start: Los elementos se alinean al inicio del eje cruzado.
3. flex-end: Los elementos se alinean al final del eje cruzado.
4. center: Los elementos se centran a lo largo del eje cruzado.
5. baseline: Los elementos se alinean según su línea base de texto.

Uso de align-items

La propiedad align-items se aplica al contenedor Flex para controlar la alineación de sus elementos hijos a lo largo del eje cruzado. Aquí tienes ejemplos de cómo puedes usar cada uno de estos valores.

align-items: stretch

css

html

[Placeholder: Imagen que muestra los elementos flex estirándose para llenar el contenedor a lo largo del eje cruzado, ignorando sus alturas]

align-items: flex-start

css

html

[Placeholder: Imagen que muestra los elementos flex alineados al inicio del contenedor a lo largo del eje cruzado]

align-items: flex-end

css

html

[Placeholder: Imagen que muestra los elementos flex alineados al final del contenedor a lo largo del eje cruzado]

align-items: center

css

html

[Placeholder: Imagen que muestra los elementos flex centrados a lo largo del eje cruzado en el contenedor]

align-items: baseline

css

html

[Placeholder: Imagen que muestra los elementos flex alineados según la línea base de su texto a lo largo del eje cruzado]

Ejemplo Completo

Este ejemplo demuestra cómo la propiedad align-items afecta la alineación de los elementos flexibles dentro de un contenedor.

html

[Placeholder: Imagen que muestra el ejemplo completo con align-items: center aplicado, centrando verticalmente los elementos en el contenedor]

Resumen

• stretch: Los elementos se estiran para llenar el contenedor a lo largo del eje cruzado.
• flex-start: Los elementos se alinean al inicio del eje cruzado.
• flex-end: Los elementos se alinean al final del eje cruzado.
• center: Los elementos se centran a lo largo del eje cruzado.
• baseline: Los elementos se alinean según su línea base de texto.

Un adecuado uso de align-items te permitirá controlar la alineación de los elementos flexibles dentro de un contenedor, creando layouts visualmente atractivos y bien centrados a lo largo del eje cruzado.