Resumen
La propiedad CSS align-items alinea los elementos de la línea flexible actual de la misma forma que justify-content, pero en dirección perpendicular.
| Valor inicial | stretch |
|---|---|
| Applies to | flex containers |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| 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.
Syntax
/* Alinea los elementos al borde de inicio */ align-items: flex-start; /* Alinea los elementos al borde de fin */ align-items: flex-end; /* Centra los elementos en el eje transversal */ align-items: center; /* Alinea la base de los elementos */ align-items: baseline; /* Estira los elementos para ajustarlos */ align-items: stretch; /* Valores globales */ align-items: inherit; align-items: initial; align-items: unset;
Valores
flex-start- El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea.
flex-end- El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea.
center- Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transvesal del elemento es mayor al del contenedor, se excederá por igual hacia ambas direcciones.
baseline- Todos los elementos flexibles son ajustados de modo que sus bases queden alienadas. 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
flex-start | flex-end | center | baseline | stretch
Especificaciones
| Especificación | Estado | Comentarios |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'align-items' in that specification. |
Candidate Recommendation | Definición inicial |
Compatibilidad de navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Soporte básico | 21.0-webkit[1] | 20.0 (20.0)[2] | 11.0[3] | 12.10 | 7.0-webkit |
| Característica | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Soporte básico | 4.4 | (Yes) | 20.0 (20.0)[2] | No support | 12.10 | 7.0-webkit | ? |
[1] Las versiones anteriores de la especificación tratan a los hijos con posición absoluta como si fueran elementos flexibles de 0x0. Las versiones posteriores los excluyen del flujo y establecen sus posiciones con base en las propiedades de alineación y justificación. Chrome implementa el comportamiento nuevo a partir de Chrome 52.
[2] Para activar soporte a flexbox en Firefox 18 y 19, el usuario debe acceder a about:config y cambiar el valor de la preferencia layout.css.flexbox.enabled a true. Los flexbox multiínea son soportados desde Firefox 28.
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.
[3] En Internet Explorer 10-11, si los elementos flex de una columna tienen align-items: center; y su contenido es muy largo, se saldrán de los límites del contenedor. Véase Flexbug #2 para más información.