Docs CSS exécutables : Justify-content CSS

Q: Quelle est la différence entre justify-content et align-items ?

justify-content répartit les éléments le long de l'axe principal, la direction dans laquelle ils s'écoulent (horizontale pour flex-direction: row). align-items les positionne le long de l'axe secondaire (vertical pour une ligne). En colonne, les deux s'inversent : justify-content devient vertical.

Q: Quelle est la différence entre space-between, space-around et space-evenly ?

space-between ne met aucun espace avant le premier élément ni après le dernier et répartit le reste entre les éléments. space-around donne à chaque élément le même espace des deux côtés, donc les bords reçoivent un demi-espace. space-evenly rend tous les espaces égaux, bords compris.

Q: Que fait align-self ?

align-self remplace le align-items du conteneur pour un seul élément. Par exemple, align-self: flex-end sur un enfant ne déplace que cet enfant à la fin de l'axe secondaire, tandis que les autres restent là où align-items les a placés.

Q: Existe-t-il un justify-self en flexbox ?

Non. Flexbox ignore justify-self, car l'axe principal est partagé par tous les éléments. Pour pousser un élément le long de l'axe principal, utilisez une marge auto, comme margin-inline-start: auto. justify-self fonctionne en grid.

justify-content et align-items en une phrase chacun

Dans un conteneur flex, justify-content répartit les éléments le long de l'axe principal (le long de la ligne) et align-items les aligne sur l'axe secondaire (de haut en bas de la ligne). Les deux se placent sur le conteneur :

<!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 boîte est centrée dans les deux sens : à la même distance des bords de début et de fin, et du haut et du bas. Retirez height: 140px et align-items: center n'a plus rien à faire, car le conteneur se réduit à la hauteur de l'élément.

Toutes les valeurs de justify-content, mesurées

Chaque rangée ci-dessous contient les trois mêmes éléments avec un justify-content différent. Les nombres de l'étiquette au-dessus de chaque rangée sont les espaces laissés par le navigateur : avant le premier élément, entre les éléments, et après le dernier.

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

Le conteneur fait 420px et les éléments en occupent 180, il reste donc 240px d'espace libre. Où il va :

Valeur	L'espace libre va	Espaces dans la démo
`flex-start` (et `start`)	entièrement après les éléments	0 / 0 / 0 / 240
`center`	moitié avant, moitié après	120 / 0 / 0 / 120
`flex-end` (et `end`)	entièrement avant les éléments	240 / 0 / 0 / 0
`space-between`	seulement entre les éléments	0 / 120 / 120 / 0
`space-around`	égal des deux côtés de chaque élément, les bords en reçoivent la moitié	40 / 80 / 80 / 40
`space-evenly`	tous les espaces égaux, bords compris	60 / 60 / 60 / 60

flex-start suit la direction flex et start suit le sens d'écriture. Ils ne diffèrent qu'avec row-reverse ou column-reverse, où flex-start se trouve à l'extrémité inversée.

Toutes les valeurs de align-items

align-items agit en travers de la ligne. Les éléments ci-dessous ont des hauteurs différentes pour que vous voyiez ce que chaque valeur en fait :

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

Valeur	Ce qui se passe sur l'axe secondaire
`stretch` (par défaut)	Les éléments sans hauteur définie grandissent pour remplir le conteneur
`flex-start` (et `start`)	Les éléments sont en haut, à leur propre hauteur
`center`	Les éléments sont centrés, à leur propre hauteur
`flex-end` (et `end`)	Les éléments sont en bas
`baseline`	Les éléments se déplacent pour que leurs premières lignes de texte partagent une même ligne de base

Dans la boîte baseline, les trois étiquettes « Ag » sont sur une même ligne alors que la première est plus grande et que la deuxième a du padding au-dessus. C'est la valeur pour une rangée qui mélange un grand titre et un petit texte, ou une étiquette et un champ.

Cliquez pour aligner

Cliquez sur n'importe quelle case de la grille 3 × 3. La boîte s'y déplace, et le CSS qui l'y place s'affiche en dessous :

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

Les lignes du sélecteur changent align-items et les colonnes changent justify-content. La case du milieu, c'est le classique « centrer une div ».

En colonne, les deux s'inversent

justify-content suit toujours l'axe principal. Avec flex-direction: column, l'axe principal est vertical : justify-content déplace alors les éléments de haut en bas et align-items les déplace en travers :

<!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 vous les confondez, échangez les deux propriétés plutôt que de réécrire la mise en page.

align-self et marges auto : un seul élément

align-self sur un élément remplace align-items pour cet élément. Il n'existe pas de justify-self en flexbox ; pour déplacer un élément le long de l'axe principal, donnez-lui une marge auto, qui prend tout l'espace libre de ce côté :

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

L'élément vert descend seul en bas, et l'élément ambre est poussé à l'autre bout de la rangée pendant que les autres restent au début.

Quand il y a plusieurs lignes : align-content

align-items aligne les éléments dans leur ligne. Quand un conteneur passe sur plusieurs lignes, align-content espace les lignes elles-mêmes, et accepte les mêmes valeurs que justify-content. Il ne fait rien dans un conteneur nowrap, dont l'unique ligne remplit toujours la hauteur du conteneur. La page flex-wrap le montre.

Erreurs courantes

Confondre les axes. justify-content suit le sens d'écoulement, align-items le traverse. En colonne, le centrage vertical, c'est justify-content: center.
Pas d'espace libre. Un élément avec flex: 1 prend tout l'espace, et justify-content n'a rien à répartir. C'est aussi le cas quand le conteneur est inline-flex et exactement aussi large que ses éléments.
Pas de hauteur pour align-items. Un conteneur aussi haut que son contenu ne laisse rien à aligner. Définissez une height ou une min-height.
Chercher justify-self en flexbox. Il y est ignoré. Utilisez margin-inline-start: auto (ou margin-left: auto) sur l'élément.
Un align-items: stretch qui n'étire pas. Un élément qui a sa propre height la garde. Retirez la hauteur (utilisez min-height s'il lui faut un minimum).
Placer les propriétés sur les éléments. Les deux vont sur le conteneur flex. Seul align-self se place sur un élément.

Questions fréquentes

Quelle est la différence entre justify-content et align-items ?

justify-content répartit les éléments le long de l'axe principal, la direction dans laquelle ils s'écoulent (horizontale pour flex-direction: row). align-items les positionne le long de l'axe secondaire (vertical pour une ligne). En colonne, les deux s'inversent : justify-content devient vertical.

Quelle est la différence entre space-between, space-around et space-evenly ?

space-between ne met aucun espace avant le premier élément ni après le dernier et répartit le reste entre les éléments. space-around donne à chaque élément le même espace des deux côtés, donc les bords reçoivent un demi-espace. space-evenly rend tous les espaces égaux, bords compris.

Pourquoi justify-content ne fonctionne-t-il pas ?

En général, il n'y a pas d'espace libre à répartir : un élément a flex-grow ou flex: 1, ou le conteneur n'est pas plus large que ses éléments (par exemple display: inline-flex ou un conteneur flottant). Vérifiez aussi que display: flex est sur le parent, pas sur les éléments.

Pourquoi align-items center ne centre-t-il pas verticalement ?

Le conteneur a probablement exactement la hauteur de son contenu, il n'y a donc rien dans quoi centrer. Donnez au conteneur flex une hauteur ou une min-height, et les éléments se placeront en son milieu.

Que fait align-self ?

align-self remplace le align-items du conteneur pour un seul élément. Par exemple, align-self: flex-end sur un enfant ne déplace que cet enfant à la fin de l'axe secondaire, tandis que les autres restent là où align-items les a placés.

Existe-t-il un justify-self en flexbox ?

Non. Flexbox ignore justify-self, car l'axe principal est partagé par tous les éléments. Pour pousser un élément le long de l'axe principal, utilisez une marge auto, comme margin-inline-start: auto. justify-self fonctionne en grid.

Concepts liés