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 |
