Alineación de bloques flex a lo largo del eje transversal en CSS
Ahora vamos a alinear los bloques también
a lo largo del eje transversal. La alineación a lo largo de este eje
se define mediante la propiedad align-items. El valor
flex-start pega los elementos al inicio del
eje, y el valor flex-end - al final.
Probemos con ejemplos.
Ejemplo
Dirijamos el eje principal de izquierda a derecha. En este caso, el eje transversal se dirigirá de arriba a abajo. Ajustemos la ubicación de nuestros bloques tanto a lo largo del eje principal como del transversal.
A lo largo del eje principal, pegaremos los bloques a su inicio,
es decir, al borde izquierdo. Para ello, establezcamos justify-content
en el valor flex-start. A lo largo del
eje transversal, también pegaremos los bloques a su inicio,
es decir, al borde superior. Para ello, establezcamos align-items
también en el valor flex-start.
Veamos lo que obtenemos:
.parent {
display: flex;
flex-direction: row; /* eje principal a la derecha, transversal hacia abajo */
justify-content: flex-start; /* bloques al inicio del eje principal */
align-items: flex-start; /* bloques al inicio del eje transversal */
}
Resultado de ejecutar el código:
Ejemplo
Ahora peguemos los bloques al final del eje transversal,
es decir, a la parte inferior. Para ello, establezcamos align-items
en el valor flex-end:
.parent {
display: flex;
flex-direction: row; /* eje principal a la derecha, transversal hacia abajo */
justify-content: flex-start; /* bloques al inicio del eje principal */
align-items: flex-end; /* bloques al final del eje transversal */
}
Resultado de ejecutar el código:
Ejemplo
Ahora dirijamos el eje principal de arriba a abajo. Como el eje principal es vertical, el transversal se dirigirá de derecha a izquierda. Pegaremos los bloques a lo largo de ambos ejes a sus inicios:
.parent {
display: flex;
flex-direction: column; /* eje principal hacia abajo, transversal a la derecha */
justify-content: flex-start; /* bloques al inicio del eje principal */
align-items: flex-start; /* bloques al inicio del eje transversal */
}
Resultado de ejecutar el código:
Ejemplo
Y ahora a lo largo del eje transversal peguemos los bloques a su final:
.parent {
display: flex;
flex-direction: column; /* eje principal hacia abajo, transversal a la derecha */
justify-content: flex-start; /* bloques al inicio del eje principal */
align-items: flex-end; /* bloques al final del eje transversal */
}
Resultado de ejecutar el código:
Ejemplo
Peguemos los bloques al final de ambos ejes:
.parent {
display: flex;
flex-direction: column; /* eje principal hacia abajo, transversal a la derecha */
justify-content: flex-end; /* bloques al final del eje principal */
align-items: flex-end; /* bloques al final del eje transversal */
}
Resultado de ejecutar el código:
Ejemplo
Cambiemos la dirección del eje principal - dirijámoslo de abajo hacia arriba. Al mismo tiempo, el eje transversal no cambiará su dirección, ya que el eje principal sigue siendo vertical.
Peguemos los bloques al inicio de ambos ejes:
.parent {
display: flex;
flex-direction: column-reverse; /* eje principal hacia arriba, transversal a la derecha */
justify-content: flex-start; /* bloques al inicio del eje principal */
align-items: flex-start; /* bloques al inicio del eje transversal */
}
Resultado de ejecutar el código:
