Docs CSS exécutables : Flex-wrap CSS

Q: Quelle est la différence entre flex-direction row et column ?

row (par défaut) place les éléments côte à côte dans le sens d'écriture, et column les empile de haut en bas. L'axe principal tourne avec lui : en colonne, justify-content agit verticalement et align-items horizontalement.

Q: Qu'est-ce que flex-flow ?

Un raccourci pour flex-direction et flex-wrap en une déclaration : flex-flow: row wrap; équivaut à flex-direction: row; flex-wrap: wrap;.

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

align-items place les éléments dans leur ligne. align-content place les lignes elles-mêmes dans le conteneur : il n'a donc d'effet que si le conteneur a flex-wrap: wrap et est plus haut que ses lignes.

flex-wrap : une ligne, ou autant qu'il en faut

Par défaut, un conteneur flex garde tous ses éléments sur une ligne (flex-wrap: nowrap) et les rétrécit pour qu'ils tiennent. flex-wrap: wrap leur permet de garder leur taille et de passer plutôt à la ligne suivante :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

Chaque élément demande 100px, cinq éléments dans une boîte de 340px. Cinq éléments et quatre espaces de 8px demandent 532px : sans retour à la ligne, chaque élément est donc comprimé à environ 62px, car les éléments flex rétrécissent par défaut. Avec wrap, ils gardent leurs 100px : trois tiennent sur la première ligne et les deux autres passent sur une deuxième.

Les valeurs de flex-wrap

Valeur	Ce qui se passe
`nowrap` (par défaut)	Une ligne. Les éléments rétrécissent, puis débordent du conteneur quand ils ne peuvent plus rétrécir
`wrap`	Les éléments qui ne tiennent pas commencent une nouvelle ligne en dessous
`wrap-reverse`	Pareil, mais les nouvelles lignes s'empilent vers le haut : la première ligne est en bas

Regardez les éléments passer à la ligne

Faites glisser le curseur pour changer la largeur du conteneur. L'affichage compte les lignes et indique combien d'éléments se trouvent sur chacune :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

À 400px, quatre éléments de 90px et trois espaces de 8px (384px) tiennent sur une ligne : vous obtenez donc 4 + 2. Allez vers 620px et les six tiennent sur une ligne ; allez vers 120px et chaque élément a sa propre ligne.

flex-direction : ligne ou colonne

flex-direction définit la direction dans laquelle s'écoulent les éléments, c'est-à-dire l'axe principal :

Valeur	Les éléments s'écoulent	Premier élément
`row` (par défaut)	côte à côte, dans le sens d'écriture	au début de la ligne
`row-reverse`	côte à côte, inversés	à la fin de la ligne
`column`	empilés, de haut en bas	en haut
`column-reverse`	empilés, de bas en haut	en bas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

Dans les deux boîtes row, les éléments s'étirent sur toute la hauteur de la boîte, car align-items: stretch agit en travers de la ligne. Dans les boîtes column, ils s'étirent plutôt sur toute la largeur, pour la même raison. Les axes ont tourné, et toutes les propriétés d'alignement avec eux (la page justify-content le montre en détail).

flex-flow : les deux en une ligne

flex-flow est le raccourci de flex-direction puis flex-wrap :

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

Des cartes responsive avec wrap, sans media query

Donnez à chaque élément une taille de départ avec flex: 1 1 180px et laissez la rangée passer à la ligne. Chaque élément grandit pour remplir sa ligne, et quand une ligne ne peut plus accueillir un élément de 180px de plus, le suivant passe à la ligne :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

Dans un aperçu d'environ 800px de large, trois cartes tiennent sur la première ligne (environ 253px chacune) et les deux dernières se partagent la deuxième ligne, où chacune grandit jusqu'à environ 386px. C'est le fonctionnement de flexbox : chaque ligne répartit son propre espace, donc les cartes d'une dernière ligne incomplète finissent plus larges que celles du dessus. Si vous voulez que la dernière carte garde la même largeur que les autres, utilisez plutôt grid avec repeat(auto-fill, minmax(180px, 1fr)) (voir la page grid).

align-content : espacer les lignes

Quand un conteneur passe à la ligne et qu'il est plus haut que ses lignes, align-content décide où vont les lignes. Il accepte les mêmes valeurs que justify-content, plus stretch :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

Dans la première boîte, les deux lignes sont en haut. Dans la seconde, la première ligne est en haut et la deuxième en bas, avec toute la hauteur libre entre elles.

Ordre inversé et accessibilité

row-reverse, column-reverse et wrap-reverse ne changent que l'endroit où les éléments sont dessinés. Les lecteurs d'écran et la touche Tab suivent toujours l'ordre du HTML, si bien qu'un utilisateur du clavier parcourt les éléments dans le sens inverse de ce qu'il voit. N'inversez que pour l'effet visuel ; quand l'ordre a un sens, changez-le dans le HTML.

Erreurs courantes

Des éléments qui rétrécissent au lieu de passer à la ligne. Les éléments avec flex: 1 partent d'un flex-basis de 0 et se serrent sur une ligne. Donnez-leur une vraie base, comme flex: 1 1 200px.
Placer flex-wrap sur les éléments. Il appartient au conteneur flex.
Utiliser align-items pour espacer les lignes. Il aligne les éléments dans chaque ligne ; les lignes elles-mêmes se déplacent avec align-content.
Un dernier élément isolé étiré sur toute la rangée. C'est flex-grow sur une ligne qui ne contient qu'un élément. Utilisez grid si toutes les cartes doivent avoir la même largeur.
Attendre de flex-direction: column qu'il remplisse une hauteur. Un conteneur en colonne n'est pas plus haut que son contenu, sauf si vous lui donnez une height, et justify-content n'a alors pas de place pour agir.

Questions fréquentes

Que fait flex-wrap: wrap ?

Il permet aux éléments flex de passer sur une nouvelle ligne quand ils ne tiennent pas sur une seule. Avec la valeur par défaut nowrap, les éléments restent sur une ligne et rétrécissent, ou débordent du conteneur s'ils ne peuvent plus rétrécir.

Pourquoi flex-wrap ne fonctionne-t-il pas ?

Le retour à la ligne ne se produit que si la somme des tailles de départ des éléments dépasse celle du conteneur. Des éléments avec flex: 1 partent d'un flex-basis de 0 et ne passent donc jamais à la ligne ; donnez-leur une vraie taille de départ (flex: 1 1 200px ou width: 200px). Vérifiez aussi que flex-wrap est sur le conteneur flex, pas sur les éléments.

Quelle est la différence entre flex-direction row et column ?

row (par défaut) place les éléments côte à côte dans le sens d'écriture, et column les empile de haut en bas. L'axe principal tourne avec lui : en colonne, justify-content agit verticalement et align-items horizontalement.

Qu'est-ce que flex-flow ?

Un raccourci pour flex-direction et flex-wrap en une déclaration : flex-flow: row wrap; équivaut à flex-direction: row; flex-wrap: wrap;.

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

align-items place les éléments dans leur ligne. align-content place les lignes elles-mêmes dans le conteneur : il n'a donc d'effet que si le conteneur a flex-wrap: wrap et est plus haut que ses lignes.

Concepts liés