La propiedad align-self en Flexbox permite alinear de manera individual un elemento flexible a lo largo del eje cruzado dentro de su contenedor Flex. Esta propiedad sobrescribe el valor establecido por align-items para ese elemento en particular, proporcionando un control granular sobre la alineación.

Valores de align-self

1. auto (por defecto): El elemento sigue el valor de align-items del contenedor.
2. flex-start: El elemento se alinea al inicio del eje cruzado.
3. flex-end: El elemento se alinea al final del eje cruzado.
4. center: El elemento se centra a lo largo del eje cruzado.
5. baseline: El elemento se alinea según su línea base de texto.
6. stretch: El elemento se estira para llenar el contenedor a lo largo del eje cruzado (si no se especifica una altura específica).

Uso de la Propiedad align-self

La propiedad align-self se aplica a los elementos flexibles (hijos del contenedor Flex) para ajustar su alineación individualmente.

Ejemplo con align-self

css

html

[Placeholder: Imagen mostrando varios elementos flexibles con diferentes valores de align-self para ilustrar cómo se alinean individualmente a lo largo del eje cruzado]

Ejemplo Completo

En este ejemplo, cada elemento usa un valor diferente de align-self para demostrar su impacto en la alineación a lo largo del eje cruzado.

html

[Placeholder: Imagen que muestra el contenedor con varios elementos, cada uno usando diferentes valores de align-self para mostrar su alineación individual]

Resumen

• align-self: Ajusta la alineación de un elemento individual a lo largo del eje cruzado.
• Valores comunes:
  • auto: Sigue el valor de align-items del contenedor.
  • flex-start: Alinea al inicio del eje cruzado.
  • flex-end: Alinea al final del eje cruzado.
  • center: Centra a lo largo del eje cruzado.
  • baseline: Alinea según la línea base del texto.
  • stretch: Estira para llenar el contenedor a lo largo del eje cruzado (si no se especifica una altura específica).

El uso adecuado de align-self permite una alineación personalizada y flexible de elementos individuales, mejorando la precisión y control en el diseño de layouts flexibles y responsivos.