Resumen
La propiedad CSS align-self alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de align-items. Si el límite transversal de alguno de los elementos está definido como auto, el valor de align-self es ignorado.
| Valor inicial | auto |
|---|---|
| Applies to | flex items, including in-flow pseudo-elements |
| Heredable | no |
| Media | visual |
| Valor calculado | auto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. Its behavior depends on the layout model, as described for justify-self. Otherwise the specified value. |
| Animatable | no |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Véase Usando las cajas flexibles CSS para más propiedades e información.
Sintaxis
/* Valores clave */ align-self: auto; align-self: flex-start; align-self: flex-end; align-self: center; align-self: baseline; align-self: stretch; /* Valores globales */ align-self: inherit; align-self: initial; align-self: unset;
Valores
auto- Se calcula acorde al valor de
align-itemsdel padre, o al destretchsi el elemento no tiene padre. flex-start- El límite transversal inicial del elemento flexible es unido al borde transversal inicial de la línea.
flex-end- El límite transversal final del elemento flexible es unido al borde transversal final de la línea.
center- Los límites del elemento flexible son centrados dentro de la línea en su eje transversal. Si el tamaño transversal del elemento es superior al del contenedor, se excederá por igual hacia ambas direcciones.
baseline- Todos los elementos flexibles son ajustados de modo que sus bases estén alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.
stretch- Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.
Sintaxis formal
auto | flex-start | flex-end | center | baseline | stretch
Especificaciones
| Especificación | Estado | Comentarios |
|---|---|---|
| CSS Box Alignment Module The definition of 'align-self' in that specification. |
Working Draft | Definición inicial |
Compatibilidad de navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Soporte básico | 21.0-webkit 36.0 |
20.0 (20.0)[1] | 11.0 | 12.10 | No support |
| Característica | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Soporte básico | ? | ? | ? | No support | 12.10 | No support |
[1] Firefox soporta solamente flexbox de una línea hasta Firefox 27. Para activar soporte a flexbox, en Firefox 18 y 19, el usuario debe cambiar la preferencia layout.css.flexbox.enabled a true en la página about:config.
Además del soporte sin prefijo, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esta preferencia es true.