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.
Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
all | 37.0 | 79.0 | 27.0 | 9.1 | 24.0 |