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.)