CSS Align-items
La propiedad CSS align-items es utilizada para alinear los elementos dentro de un contenedor flex (elementos con la propiedad display: flex establecida) en el eje transversal, que es el eje vertical (arriba-abajo) por defecto.
Esta propiedad nos permite controlar cómo los elementos hijos se distribuyen dentro del contenedor padre en el eje transversal.
Valores
Los valores posibles son:
flex-start: los elementos se alinean al comienzo del contenedor, es decir, arriba.
flex-end: los elementos se alinean al final del contenedor, es decir, abajo.
center: los elementos se alinean en el centro del contenedor.
baseline: los elementos se alinean según la línea base.
stretch(valor predeterminado): los elementos se estiran para llenar el contenedor.
Ejemplo de uso
.container {
display: flex;
align-items: center;
}<span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: CSS (css)En este ejemplo, todos los elementos dentro del contenedor con clase «container» se alinearán en el centro del contenedor en el eje transversal.
En resumen, mientras la propiedad justify-content se utiliza para alinear los elementos en el eje principal, la propiedad align-items se utiliza para alinear los elementos en el eje transversal.
Es importante tener en cuenta que ambas propiedades son complementarias y trabajan de manera conjunta para lograr la distribución deseada de los elementos hijos dentro del contenedor padre.
Más ejemplos:
Aquí te presento algunos ejemplos de cómo se verían los diferentes valores de la propiedad align-items en un contenedor flex:
flex-start:
.container {
display: flex;
align-items: flex-start;
}
Lenguaje del código: CSS (css)flex-end:
.container {
display: flex;
align-items: flex-end;
}
Lenguaje del código: CSS (css)center:
.container {
display: flex;
align-items: center;
}
Lenguaje del código: CSS (css)baseline:
.container {
display: flex;
align-items: baseline;
}
Lenguaje del código: CSS (css)stretch(valor predeterminado):
.container {
display: flex;
align-items: stretch;
}
Lenguaje del código: CSS (css)Ten en cuenta que estos ejemplos son solo una muestra de cómo se ven los diferentes valores de align-items, y que la apariencia final dependerá de otros estilos que se apliquen al contenedor y a los elementos hijos.
Además, es importante mencionar que baseline solo tendrá efecto si los elementos hijos tienen contenido de texto y se debe tener en cuenta el tamaño de la letra y si esta tiene o no decoración (subrayado, tachado, etc.)