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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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: