align-items

La propiedad CSS align-items establece el valor align-self sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del Cross Axis, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su área grid.

El ejemplo interactivo a continuación demuestra algunos de los valores de align-items utilizando el sistema grid.

Sintaxis

/* Basic keywords */ 
align-items: normal; 
align-items: stretch; 

/* Positional alignment */ 
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */ 
align-items: start; /* Pack items from the start */ 
align-items: end; /* Pack items from the end */ 
align-items: flex-start; /* Pack flex items from the start */ 
align-items: flex-end; /* Pack flex items from the end */ 
align-items: self-start; 
align-items: self-end; 

/* Baseline alignment */
align-items: baseline; 
align-items: first baseline; 
align-items: last baseline; /* Overflow alignment (for positional alignment only) */ 
align-items: safe center; 
align-items: unsafe center; 

/* Global values */
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 transversal 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 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

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

Especificaciones

Especificación Estado Comentarios
CSS Flexible Box Layout Module
La definición de 'align-items' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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] Sin soporte 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.

Véase también