Crea tu web, tutor html, css

Flexbox: espacio libre

La alineación de los items hijos tambien puede hacerse en la dirección del eje principal (sea el horizontal o el vertical). Es decir, si usamos la opción flex-direction: row, entonces podemos alinear los items hijos en horizontal y si usamos lo opción column entonces podemos alinearlos en vertical

Esto lo podemos hacer con la propiedad justify-content. En realidad esta opción lo que hace es distribuir los espacios vacios entre los items hijos, lo que da lugar a esa alineación en el sentido del eje principal, por eso verás que sus valores no coincidan con los habituales en las alineaciones (start, end, center).

Con esta propiedad se completa la alineación de los items hijos dentro del flexbox a lo largo de ambos ejes: el principal y el transversal.

Las opciones disponibles son estas que ves aquí

Opciones de justify-content en flexbox

Los valores flex-start, flex-end y center son similares a los usados en align-items, pero aplicados al eje principal.

Lo nuevo aquí son los valores space-(between | around | evenly). Aunque en la imagen se ven los efectos los detallo un poco más
space-between
coloca el primer y último bloque en los bordes del contenedor y reparte equitativamente el espacio entre los bloques hijos restantes. Entre los bloques quedarán espacios iguales.
space-around
rodea cada bloque con una zona de igual grosor. Observa que el espacio entre el borde y el primer item es la mitad que entre dos items hijo. Se añade el mismo espacio a los lados de todos los bloques.
space-evenly
también rodea los items hijo con un espacio, pero lo hace para que todos queden equidistantes entre si y con los bordes.

Esta imagen se refiere a un flexbox con el eje horizontal como eje principal, es decir, con flex-direction: row.

La propiedad justify-content permite completar las alineaciones de los items hijos. Con esta propiedad se alinea en el eje principal y además se reparte el espacio vacio entre los hijos

Ejemplo se alineación horizontal

Este ejemplo lo puedes editar en el sandbox, modificando los valores de la propiedad justify-content para ver el efecto de cada caso.

<style>
#caja-flex {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid blue;
}
#caja-flex div {
  margin-top:16px;
  width: 70px;
  height: 70px;
  border: 2px solid black;
}
</style>
<h1>Propiedad justify-content </h1>
<div id="caja-flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Cambia el eje principal a columnas (añadiendo flex-direction:column al regla #caja-flex) para comprobar como funciona esta alineación en disposiciones verticales de los items hijos del contenedor flexbox.

Las propìedad justify-content funciona igual en ambos ejes y da un control muy detallado de la posición de los items hijos dentro del flexbox.