La align-selfpropiedad es una subpropiedad del módulo Diseño de caja flexible.
Permite anular el align-itemsvalor de elementos flexibles específicos.
La align-selfpropiedad acepta los mismos 5 valores que align-items:
flex-start: el borde del margen de inicio cruzado del elemento se coloca en la línea de inicio cruzadoflex-end: el borde del margen cruzado del elemento se coloca en la línea cruzadacenter: el elemento está centrado en el eje transversalbaseline: los elementos están alineados tal como su línea de base está alineadastretch(predeterminado): estirar para llenar el contenedor (aún respetando el ancho mínimo / ancho máximo)
Sintaxis
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Manifestación
La siguiente demostración muestra cómo un elemento se puede alinear en el contenedor flexible según el align-selfvalor:
- El primer elemento se establece en
flex-start - El segundo elemento se establece en
flex-end - El tercer elemento se establece en
center - El cuarto elemento está configurado para
baseline - El quinto elemento está configurado para
stretch
Vea la demostración de Pen align-self de CSS-Tricks (@ css-tricks) en CodePen.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Para obtener más información sobre cómo mezclar sintaxis para obtener la mejor compatibilidad con el navegador, consulte este artículo (Trucos CSS) o este artículo (DevOpera).