justify-content

justify-content define cómo se distribuyen los ítems flex a lo largo del eje principal — el eje definido por flex-direction. Cuando hay espacio libre en esa dirección (el contenedor es más ancho o alto que la suma de los ítems), justify-content decide qué se hace con ese espacio: si se pone antes, después o entre los ítems, o si los ítems se aprietan hacia un lado.

La propiedad actúa sobre el eje principal, no sobre una dirección absoluta. Con flex-direction: row (el default), justify-content controla la distribución horizontal. Con flex-direction: column, controla la distribución vertical. Esta distinción es el error más común: muchos aprenden justify-content como “el que centra horizontalmente” cuando en realidad es “el que distribuye en el eje principal, sea cual sea”.

justify-content solo tiene efecto visible cuando hay espacio libre en el eje principal. Si los ítems ya llenan completamente el contenedor, no hay nada que distribuir y la propiedad no cambia nada. Para crear espacio en el eje principal, el contenedor necesita un width (en row) o un height (en column) mayor que la suma de los ítems.

Cómo funciona

Tras colocar todos los ítems, el navegador calcula el espacio libre restante en el eje principal. justify-content determina cómo se distribuye ese espacio: si se acumula antes del primer ítem, después del último, o se reparte entre los ítems. Los valores space-* son los más potentes y los que más se confunden entre sí.

Sintaxis

.contenedor {
  display: flex;
  justify-content: flex-start;    /* valor por defecto */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

Valores

flex-start (valor por defecto)

Los ítems se agrupan al inicio del eje principal (main-start). El espacio libre queda al final. Con row, los ítems se alinean a la izquierda; con column, en la parte superior.

Cuándo usarlo: el comportamiento por defecto — ítems agrupados al inicio sin distribución especial.

flex-end

Los ítems se agrupan al final del eje principal (main-end). El espacio libre queda al inicio. Con row, los ítems se alinean a la derecha.

Cuándo usarlo: alinear un grupo de botones o elementos al extremo final (derecha en row).

center

Los ítems se agrupan en el centro del eje principal. El espacio libre se divide en partes iguales antes del primer ítem y después del último.

Cuándo usarlo: centrar horizontalmente un grupo de elementos dentro de su contenedor.

space-between

El espacio libre se distribuye únicamente entre los ítems. El primero queda pegado a main-start y el último a main-end. Si hay N ítems, hay N−1 espacios entre ellos, todos iguales.

Gotcha: con un solo ítem, se comporta igual que flex-start — no hay “entre” si solo hay un elemento. Con la última línea de un contenedor con flex-wrap: wrap, el ítem solitario puede quedar pegado al inicio.

Cuándo usarlo: barras de navegación con logo a la izquierda y links a la derecha, o cualquier layout donde el primer y último elemento deben estar en los extremos.

space-around

El espacio libre se distribuye alrededor de cada ítem — cada ítem recibe la misma cantidad de espacio a cada lado. El resultado es que el espacio entre dos ítems consecutivos es el doble del espacio en los extremos (porque dos márgenes se suman entre ítems adyacentes).

Cuándo usarlo: cuando se quiere espacio visualmente uniforme alrededor de cada ítem, aceptando que los bordes tengan la mitad.

space-evenly

El espacio libre se distribuye de forma que haya exactamente la misma cantidad de espacio entre todos los ítems, incluyendo los extremos. A diferencia de space-around, los espacios en los bordes son iguales a los espacios entre ítems — no la mitad.

Cuándo usarlo: cuando se quiere espacio perfectamente uniforme en todos los huecos, incluyendo los bordes del contenedor.

Diferencia exacta entre space-between, space-around y space-evenly

Con 3 ítems y un espacio libre total de 120px:

La regla: space-between nunca pone espacio en los bordes; space-around pone la mitad en los bordes que entre ítems; space-evenly hace todos los huecos iguales.

Ejemplo realista

/* Barra de navegación: logo y links en los extremos */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

/* Hero centrado */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

Cuándo usar cada valor

Notas, gotchas e interacción

• Solo actúa cuando hay espacio libre. Si los ítems llenan el contenedor al 100%, justify-content no tiene efecto visible. Para que haya espacio libre con row, el contenedor debe tener width mayor que la suma de los ítems; con column, debe tener height definida y mayor.
• El eje principal cambia con flex-direction. justify-content: center centra en el eje principal — que puede ser vertical si usás column. No lo pensar como “centra horizontalmente” es la clave.
• Con flex-wrap: wrap, actúa línea por línea. En un layout multi-línea, justify-content distribuye el espacio dentro de cada línea de forma independiente. Si la última fila tiene un solo ítem, space-between lo pone al inicio.
• gap y justify-content coexisten. El gap define un mínimo de espacio entre ítems; justify-content distribuye el espacio libre adicional. En un contenedor donde los ítems ya ocupan el 100% gracias al gap, justify-content no tiene efecto adicional.
• space-evenly tiene soporte levemente menor en navegadores muy viejos. En proyectos que deben soportar Edge Legacy o Safari < 12, verificar caniuse.

Vigente / legacy

justify-content es parte de Flexbox Level 1, ampliamente soportado. No hay alternativa legacy. Los valores space-* tienen soporte desde los primeros navegadores con Flexbox completo. No se necesitan prefijos de vendor en proyectos modernos.