Docs executáveis de CSS: Justify-content

Q: Qual a diferença entre justify-content e align-items?

justify-content distribui os itens ao longo do eixo principal, a direção em que eles correm (horizontal para flex-direction: row). align-items os posiciona ao longo do eixo cruzado (vertical em uma linha). Em uma coluna, os dois se invertem: justify-content passa a ser vertical.

Q: Qual a diferença entre space-between, space-around e space-evenly?

space-between não põe espaço antes do primeiro item nem depois do último e divide o resto entre os itens. space-around dá a cada item o mesmo espaço dos dois lados, então as bordas ficam com meio espaço. space-evenly deixa todos os espaços iguais, inclusive nas bordas.

Q: O que o align-self faz?

align-self sobrescreve o align-items do contêiner para um item. Por exemplo, align-self: flex-end em um filho move só esse filho para o fim do eixo cruzado, enquanto os outros ficam onde o align-items os colocou.

Q: Existe justify-self no flexbox?

Não. O flexbox ignora justify-self, porque o eixo principal é compartilhado por todos os itens. Para empurrar um item ao longo do eixo principal, use uma margin auto, como margin-inline-start: auto. O justify-self funciona no grid.

justify-content e align-items em uma frase cada

Em um contêiner flex, justify-content distribui os itens ao longo do eixo principal (ao longo da linha) e align-items os alinha no eixo cruzado (para cima e para baixo na linha). Os dois vão no contêiner:

<!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>

A caixa fica centralizada nas duas direções: à mesma distância das bordas inicial e final, e do topo e da base. Tire o height: 140px e o align-items: center fica sem ter o que fazer, porque o contêiner encolhe até a altura do próprio item.

Todos os valores de justify-content, medidos

Cada linha abaixo tem os mesmos três itens com um justify-content diferente. Os números no rótulo acima de cada linha são os espaços que o navegador deixou: antes do primeiro item, entre os itens e depois do ú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>

O contêiner tem 420px e os itens ocupam 180px, então sobram 240px de espaço livre. Para onde ele vai:

Valor	O espaço livre vai	Espaços na demo
`flex-start` (e `start`)	todo depois dos itens	0 / 0 / 0 / 240
`center`	metade antes, metade depois	120 / 0 / 0 / 120
`flex-end` (e `end`)	todo antes dos itens	240 / 0 / 0 / 0
`space-between`	só entre os itens	0 / 120 / 120 / 0
`space-around`	igual dos dois lados de cada item, então as bordas ficam com a metade	40 / 80 / 80 / 40
`space-evenly`	todos os espaços iguais, bordas incluídas	60 / 60 / 60 / 60

flex-start segue a direção do flex e start segue a direção da escrita. Eles só diferem com row-reverse ou column-reverse, em que flex-start fica na ponta invertida.

Todos os valores de align-items

align-items age através da linha. Os itens abaixo têm alturas diferentes para você ver o que cada valor faz com eles:

<!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	O que acontece no eixo cruzado
`stretch` (o padrão)	Itens sem altura definida crescem até preencher o contêiner
`flex-start` (e `start`)	Os itens ficam no topo, com a própria altura
`center`	Os itens ficam centralizados, com a própria altura
`flex-end` (e `end`)	Os itens ficam na base
`baseline`	Os itens se movem para que as primeiras linhas de texto dividam a mesma linha de base

Na caixa baseline, os três rótulos "Ag" ficam na mesma linha, embora o primeiro seja maior e o segundo tenha padding em cima. Esse é o valor para uma linha que mistura um título grande com um texto pequeno, ou um rótulo com um input.

Clique para alinhar

Clique em qualquer célula da grade 3 por 3. A caixa vai para lá, e o CSS que a coloca ali aparece embaixo:

<!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>

As linhas do seletor mudam o align-items e as colunas mudam o justify-content. A célula do meio é o clássico "centralizar uma div".

Em uma coluna, os dois se invertem

justify-content sempre segue o eixo principal. Com flex-direction: column o eixo principal é vertical, então justify-content move os itens para cima e para baixo e align-items os move para os lados:

<!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>

Se você trocar os dois, inverta as duas propriedades em vez de reescrever o layout.

align-self e margens auto: um item só

align-self em um item sobrescreve o align-items para aquele item. Não existe justify-self no flexbox; para mover um item ao longo do eixo principal, dê a ele uma margin auto, que ocupa todo o espaço livre daquele 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>

O item verde desce sozinho para a base, e o item âmbar é empurrado para a outra ponta da linha, enquanto os outros ficam no início.

Quando há várias linhas: align-content

align-items alinha os itens dentro da linha deles. Quando um contêiner quebra em várias linhas, align-content espaça as próprias linhas, e aceita os mesmos valores do justify-content. Ele não faz nada em um contêiner nowrap, cuja única linha sempre ocupa a altura do contêiner. A página do flex-wrap mostra isso.

Erros comuns

Confundir os eixos. justify-content é a direção do fluxo, align-items é a transversal. Em uma coluna, centralizar na vertical é justify-content: center.
Sem espaço livre. Um item com flex: 1 ocupa todo o espaço, então o justify-content não tem nada para distribuir. O mesmo acontece quando o contêiner é inline-flex e tem exatamente a largura dos itens.
Sem altura para o align-items. Um contêiner com a altura do conteúdo não deixa nada para alinhar. Defina um height ou min-height.
Procurar justify-self no flexbox. Ele é ignorado ali. Use margin-inline-start: auto (ou margin-left: auto) no item.
align-items: stretch que não estica. Um item com height próprio o mantém. Remova a altura (use min-height se precisar de um mínimo).
Colocar as propriedades nos itens. As duas vão no contêiner flex. Só o align-self vai em um item.

Perguntas frequentes

Qual a diferença entre justify-content e align-items?

justify-content distribui os itens ao longo do eixo principal, a direção em que eles correm (horizontal para flex-direction: row). align-items os posiciona ao longo do eixo cruzado (vertical em uma linha). Em uma coluna, os dois se invertem: justify-content passa a ser vertical.

Qual a diferença entre space-between, space-around e space-evenly?

space-between não põe espaço antes do primeiro item nem depois do último e divide o resto entre os itens. space-around dá a cada item o mesmo espaço dos dois lados, então as bordas ficam com meio espaço. space-evenly deixa todos os espaços iguais, inclusive nas bordas.

Por que o justify-content não funciona?

Normalmente não há espaço livre para distribuir: um item tem flex-grow ou flex: 1, ou o contêiner só tem a largura dos itens (por exemplo display: inline-flex ou um contêiner com float). Confira também se o display: flex está no pai, e não nos itens.

Por que align-items center não centraliza na vertical?

Provavelmente o contêiner tem exatamente a altura do conteúdo, então não há onde centralizar. Dê ao contêiner flex um height ou min-height, e os itens vão para o meio dele.

O que o align-self faz?

align-self sobrescreve o align-items do contêiner para um item. Por exemplo, align-self: flex-end em um filho move só esse filho para o fim do eixo cruzado, enquanto os outros ficam onde o align-items os colocou.

Existe justify-self no flexbox?

Não. O flexbox ignora justify-self, porque o eixo principal é compartilhado por todos os itens. Para empurrar um item ao longo do eixo principal, use uma margin auto, como margin-inline-start: auto. O justify-self funciona no grid.

Conceitos relacionados