
La propiedad align-items en CSS define la forma en que el navegador distribuye el espacio entre y alrededor de los elementos a lo largo del eje secundario del contenedor flexible. Funciona como la propiedad justify-content
pero en sentido ortogonal.
Funciones align-items css
Valor inicial | stretch |
---|---|
Aplicado a | Contenedores flexibles. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/* palabras clave reservadas */ align-items: normal; align-items: stretch; /* alineación espacial */ align-items: center; align-items: start; align-items: end; align-items: flex-start; align-items: flex-end; align-items: self-start; align-items: self-end; align-items: left; align-items: right; /* alineación de línea de base */ align-items: baseline; align-items: first baseline; align-items: last baseline; align-items: safe center; align-items: unsafe center; /* valores globales */ align-items: inherit; align-items: initial; align-items: unset;
La diferencia entre esta propiedad y la propiedad align-content
es que esta propiedad especifica la alineación de los elementos en función de la línea de alineación, mientras que la propiedad align-content
especifica la alineación de las propias líneas.
Puede resultar difícil entender la explicación anterior sin proporcionar un ejemplo, por lo que compararemos el siguiente ejemplo en vivo entre las dos características:
Ejemplos y aplicaciones en código
Un ejemplo del uso de todos los valores que son compatibles con la mayoría de los navegadores hoy en día, observe la forma en que los elementos y los espacios en blanco que quedan a su alrededor se distribuyen cuando se usan valores diferentes:
<code>align-items: flex-start;</code> <div class="container flex-start"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>align-items: flex-end;</code> <div class="container flex-end"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>align-items: center;</code> <div class="container center"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <br> <code>align-items: stretch;</code> <div class="container stretch"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div>
Código CSS:
.container { display: flex; flex-wrap: wrap; height:200px; width: 240px; background-color: #8c8c8c; } .flex-start { align-items: flex-start; } .flex-end { align-items: flex-end; } .center { align-items: center; } .stretch { align-items: stretch; } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 29,0 | 20,0 | 11 | 12,5 | 9.0 |
Empezar y terminar | No soportado | soportado | No soportado | No soportado | ? |
Izquierda y derecha | No soportado | 52,0 | No soportado | No soportado | ? |
Base | 57,0 | soportado | No soportado | 44,0 | ? |
Primera línea de base y última línea de base | No soportado | 52,0 | No soportado | No soportado | ? |
Estirarse | 57,0 | 52,0 | No soportado | 44,0 | ? |
Las versiones anteriores de algunos navegadores (por ejemplo, Chrome, IE, Safari) admitían flexbox pero con el uso de una versión anterior ( -webkit-
o -ms-
).
Características generales
La propiedad acepta los align-items
siguientes valores, tenga en cuenta que solo hemos explicado los valores no admitidos en algunos navegadores porque no funciona.
flex-start
Los objetos se alinearán uno al lado del otro comenzando desde el principio del eje secundario del contenedor flexible (es decir, desde la parte superior del elemento en la mayoría de los casos).
flex-end
Los objetos se alinearán uno al lado del otro comenzando desde el final del eje secundario del contenedor flexible (es decir, desde la parte inferior del elemento en la mayoría de los casos).
center
Los objetos se alinearán uno al lado del otro comenzando en el centro del eje secundario del contenedor flexible.
stretch
Si las dimensiones de los artículos dentro del contenedor en el eje secundario son menores que las dimensiones del contenedor, entonces las dimensiones de los artículos aumentarán igualmente pero respetando las restricciones impuestas por propiedades max-height
o max-width
(o similares), por lo que las dimensiones de los artículos dentro el contenedor será igual a la dimensión del contenedor en el eje secundario.
Estructura align-items css
align-items: flex-start | flex-end | center | stretch;
Consulte también
- La página de subpropiedades establecida por la propiedad align:
align-content
yalign-self
. - Página de propiedades
position
que describe cómo se debe colocar el elemento en el documento. - La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS