Docs ejecutables de CSS: Justify-content

Q: ¿Qué diferencia hay entre justify-content y align-items?

justify-content reparte los elementos a lo largo del eje principal, la dirección en la que fluyen (horizontal con flex-direction: row). align-items los coloca a lo largo del eje transversal (vertical en una fila). En una columna los dos se intercambian: justify-content pasa a ser vertical.

Q: ¿Qué diferencia hay entre space-between, space-around y space-evenly?

space-between no pone espacio antes del primer elemento ni después del último y reparte el resto entre los elementos. space-around le da a cada elemento el mismo espacio a los dos lados, así que los bordes reciben medio hueco. space-evenly hace que todos los huecos sean iguales, incluidos los bordes.

Q: ¿Qué hace align-self?

align-self sobrescribe el align-items del contenedor para un solo elemento. Por ejemplo, align-self: flex-end en un hijo mueve solo ese hijo al final del eje transversal, mientras los demás se quedan donde los puso align-items.

Q: ¿Existe justify-self en flexbox?

No. Flexbox ignora justify-self, porque el eje principal lo comparten todos los elementos. Para empujar un elemento a lo largo del eje principal, usa un margin auto, como margin-inline-start: auto. justify-self funciona en grid.

justify-content y align-items en una frase cada uno

En un contenedor flex, justify-content reparte los elementos a lo largo del eje principal (a lo largo de la fila) y align-items los alinea en el eje transversal (de arriba abajo en la fila). Los dos van en el contenedor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

La caja está centrada en las dos direcciones: a la misma distancia de los bordes de inicio y de fin, y de arriba y de abajo. Quita height: 140px y align-items: center no tiene nada que hacer, porque el contenedor se encoge hasta la altura propia del elemento.

Todos los valores de justify-content, medidos

Cada fila de abajo tiene los mismos tres elementos con un justify-content distinto. Los números de la etiqueta encima de cada fila son los huecos que dejó el navegador: antes del primer elemento, entre elementos y después del último.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

El contenedor mide 420px y los elementos ocupan 180px, así que hay 240px de espacio libre. Adónde va:

Valor	El espacio libre va	Huecos en la demo
`flex-start` (y `start`)	todo después de los elementos	0 / 0 / 0 / 240
`center`	la mitad antes, la mitad después	120 / 0 / 0 / 120
`flex-end` (y `end`)	todo antes de los elementos	240 / 0 / 0 / 0
`space-between`	solo entre los elementos	0 / 120 / 120 / 0
`space-around`	igual a los dos lados de cada elemento, así que los bordes reciben la mitad	40 / 80 / 80 / 40
`space-evenly`	todos los huecos iguales, bordes incluidos	60 / 60 / 60 / 60

flex-start sigue la dirección flex y start sigue la dirección de escritura. Solo se diferencian con row-reverse o column-reverse, donde flex-start queda en el extremo invertido.

Todos los valores de align-items

align-items trabaja a lo ancho de la fila. Los elementos de abajo tienen alturas distintas para que veas qué hace cada valor con ellos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

Valor	Qué pasa en el eje transversal
`stretch` (el valor por defecto)	Los elementos sin altura definida crecen hasta llenar el contenedor
`flex-start` (y `start`)	Los elementos quedan arriba, con su propia altura
`center`	Los elementos quedan centrados, con su propia altura
`flex-end` (y `end`)	Los elementos quedan abajo
`baseline`	Los elementos se mueven para que sus primeras líneas de texto compartan una línea base

En la caja baseline, las tres etiquetas "Ag" quedan sobre una misma línea aunque la primera sea más grande y la segunda tenga padding arriba. Es el valor para una fila que mezcla un título grande con texto pequeño, o una etiqueta con un input.

Haz clic para alinear

Haz clic en cualquier celda de la cuadrícula de 3 por 3. La caja se mueve ahí, y el CSS que la pone ahí aparece debajo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

Las filas del selector cambian align-items y las columnas cambian justify-content. La celda del medio es el clásico "centrar un div".

En una columna, los dos se intercambian

justify-content siempre sigue el eje principal. Con flex-direction: column el eje principal es vertical, así que justify-content mueve los elementos hacia arriba y hacia abajo y align-items los mueve a lo ancho:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

Si los confundes, intercambia las dos propiedades en lugar de reescribir el layout.

align-self y márgenes auto: un solo elemento

align-self en un elemento sobrescribe align-items para ese elemento. En flexbox no existe justify-self; para mover un elemento a lo largo del eje principal, dale un margin auto, que toma todo el espacio libre de ese lado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

El elemento verde baja solo hasta abajo, y el ámbar queda empujado al otro extremo de la fila mientras los demás se quedan al inicio.

Cuando hay varias líneas: align-content

align-items alinea los elementos dentro de su línea. Cuando un contenedor pasa a varias líneas, align-content espacia las líneas en sí, y acepta los mismos valores que justify-content. No hace nada en un contenedor nowrap, cuya única línea siempre ocupa toda la altura del contenedor. La página de flex-wrap lo muestra.

Errores comunes

Confundir los ejes. justify-content es la dirección del flujo y align-items la cruza. En una columna, centrar en vertical es justify-content: center.
No hay espacio libre. Un elemento con flex: 1 toma todo el espacio, así que justify-content no tiene nada que repartir. Lo mismo pasa cuando el contenedor es inline-flex y exactamente tan ancho como sus elementos.
Sin altura para align-items. Un contenedor tan alto como su contenido no deja nada que alinear. Define un height o un min-height.
Buscar justify-self en flexbox. Ahí se ignora. Usa margin-inline-start: auto (o margin-left: auto) en el elemento.
Un align-items: stretch que no estira. Un elemento con su propio height lo conserva. Quita la altura (usa min-height si necesita un mínimo).
Poner las propiedades en los elementos. Las dos van en el contenedor flex. Solo align-self va en un elemento.

Preguntas frecuentes

¿Qué diferencia hay entre justify-content y align-items?

justify-content reparte los elementos a lo largo del eje principal, la dirección en la que fluyen (horizontal con flex-direction: row). align-items los coloca a lo largo del eje transversal (vertical en una fila). En una columna los dos se intercambian: justify-content pasa a ser vertical.

¿Qué diferencia hay entre space-between, space-around y space-evenly?

space-between no pone espacio antes del primer elemento ni después del último y reparte el resto entre los elementos. space-around le da a cada elemento el mismo espacio a los dos lados, así que los bordes reciben medio hueco. space-evenly hace que todos los huecos sean iguales, incluidos los bordes.

¿Por qué no funciona justify-content?

Normalmente no hay espacio libre que repartir: un elemento tiene flex-grow o flex: 1, o el contenedor es tan ancho como sus elementos (por ejemplo display: inline-flex o un contenedor con float). Comprueba también que display: flex esté en el padre y no en los elementos.

¿Por qué align-items center no centra en vertical?

Probablemente el contenedor es exactamente tan alto como su contenido, así que no hay nada en lo que centrar. Dale al contenedor flex una altura o un min-height, y los elementos se moverán a su centro.

¿Qué hace align-self?

align-self sobrescribe el align-items del contenedor para un solo elemento. Por ejemplo, align-self: flex-end en un hijo mueve solo ese hijo al final del eje transversal, mientras los demás se quedan donde los puso align-items.

¿Existe justify-self en flexbox?

No. Flexbox ignora justify-self, porque el eje principal lo comparten todos los elementos. Para empujar un elemento a lo largo del eje principal, usa un margin auto, como margin-inline-start: auto. justify-self funciona en grid.

Conceptos relacionados