align-self

Índice

Definición de .align-self aplicado en CSS

La propiedad .align-self es una subproperiedad del módulo de diseño de caja flexible.

Caso de uso de align-self

Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de la siguiente forma:

align-self: auto | flex-start | flex-end | center | baseline | stretch

.flex-item {
  align-self: flex-end;
}

Otro ejemplo más avanzado de .align-self es el siguiente de CODEPEN:

Sintaxis de .align-self en CSS

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

Valores

Valor Descripción Juegalo
auto Defecto. El elemento hereda la propiedad de elementos de alineación de su contenedor principal, o "estirar" si no tiene un contenedor principal
tramo El elemento se coloca para adaptarse al contenedor.
centro El elemento se coloca en el centro del contenedor.
arranque flexible El elemento se coloca al principio del contenedor.
extremo flexible El elemento se coloca al final del contenedor.
base El elemento se coloca en la línea de base del contenedor.
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .align-self

Los números de la tabla detallan la primera versión del navegador que es totalmente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
all 37.0 79.0 27.0 9.1 24.0

Referencias técnicas

No dudes en echar un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso