Definición de .align-items aplicado en CSS
La propiedad .align-items está relacionada con el diseño CSS. Efecta cómo los elementos están alineados tanto en los diseños de FlexBox como en la cuadrícula.
Ejemplo de uso de align-items
Esta propiedad de CSS se emplea de esta forma:
.container {
display: flex;
align-items: flex-start;
}Otro ejemplo más avanzado de .align-items es el siguiente de CODEPEN:
Sintaxis de .align-items en CSS
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;Valores
| Valor | Descripción | Juegalo |
|---|---|---|
| tramo | Defecto. Los artículos se estiran para adaptarse al contenedor. | |
| centro | Los artículos se colocan en el centro del contenedor. | |
| arranque flexible | Los elementos se colocan al principio del contenedor. | |
| extremo flexible | Los artículos se colocan al final del contenedor. | |
| base | Los elementos se colocan en la línea de base del contenedor. | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .align-items
Los números de la tabla detallan la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| align-self | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- | 12.1 |
