Alineación de elementos flex a lo largo del eje principal en CSS
La propiedad justify-content permite
alinear elementos a lo largo del eje principal. Anteriormente,
ya has aprendido los valores center,
space-between, space-around,
space-evenly. Ahora vamos a estudiar
algunos valores más.
El valor flex-start alinea los elementos al inicio
del eje principal, y el valor flex-end - al final.
Veamos algunos ejemplos.
Ejemplo
Dirijamos el eje principal de izquierda a derecha, estableciendo
la propiedad flex-direction con el valor row.
Alineemos los bloques al inicio del eje. Para ello, establezcamos justify-content
con el valor flex-start:
.parent {
display: flex;
flex-direction: row; /* eje principal de izquierda a derecha */
justify-content: flex-start; /* bloques al inicio del eje principal */
}
Resultado del código:
Ejemplo
Ahora alineemos los bloques al final del eje.
Para ello, establezcamos justify-content
con el valor flex-end:
.parent {
display: flex;
flex-direction: row; /* eje principal de izquierda a derecha */
justify-content: flex-end; /* bloques al final del eje principal */
}
Resultado del código:
Ejemplo
Ahora dirijamos el eje principal de derecha a izquierda,
estableciendo la propiedad flex-direction con el valor
row-reverse. Alineemos los bloques al inicio
del eje, es decir, al borde derecho. Para ello, establezcamos justify-content
con el valor flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* eje principal de derecha a izquierda */
justify-content: flex-start; /* bloques al inicio del eje principal */
}
Resultado del código:
Ejemplo
Y ahora alineemos los bloques al final del eje principal,
es decir, al borde izquierdo. Para ello, establezcamos justify-content
con el valor flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* eje principal de derecha a izquierda */
justify-content: flex-end; /* bloques al final del eje principal */
}
Resultado del código:
Ejemplo
En los ejemplos anteriores, el eje principal estaba dirigido horizontalmente. Ahora vamos a girarlo y dirigirlo verticalmente.
Dirijamos el eje principal hacia abajo, estableciendo
la propiedad flex-direction con el valor
column.
Alineemos los bloques al inicio del eje principal, es decir,
al borde superior. Para ello, establezcamos justify-content
con el valor flex-start:
.parent {
display: flex;
flex-direction: column; /* eje principal de arriba a abajo */
justify-content: flex-start; /* bloques al inicio del eje principal */
}
Resultado del código:
Ejemplo
Ahora alineemos los bloques al final del eje principal,
es decir, al borde inferior. Para ello, establezcamos justify-content
con el valor flex-end:
.parent {
display: flex;
flex-direction: column; /* eje principal de arriba a abajo */
justify-content: flex-end; /* bloques al final del eje principal */
}
Resultado del código:
Ejemplo
Giremos el eje principal, dirigiéndolo de abajo
a arriba. Para ello, establezcamos la propiedad flex-direction
con el valor column-reverse. En
este caso, los bloques cambiarán su orden -
al inicio del eje estará el último bloque del código HTML.
Alineemos los bloques al inicio del eje principal,
es decir, al borde inferior. Para ello, establezcamos justify-content
con el valor flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* eje principal de abajo a arriba */
justify-content: flex-start; /* bloques al inicio del eje principal */
}
Resultado del código:
Ejemplo
Alineemos los bloques al final del eje principal,
es decir, al borde superior. Para ello, establezcamos justify-content
con el valor flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* eje principal de abajo a arriba */
justify-content: flex-end; /* bloques al final del eje principal */
}
Resultado del código:
