Docs CSS exécutables : Flexbox CSS

Q: Que signifie flex: 1 ?

flex: 1 est le raccourci de flex: 1 1 0% : l'élément peut grandir (flex-grow: 1), peut rétrécir (flex-shrink: 1) et part d'une taille nulle (flex-basis: 0%). Des éléments qui ont tous flex: 1 se partagent l'espace libre à parts égales et finissent donc avec la même largeur, sauf si leur contenu ne peut pas tenir.

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

justify-content place les éléments le long de l'axe principal (horizontalement sur une ligne), et align-items le long de l'axe secondaire (verticalement sur une ligne). Avec flex-direction: column, les deux axes s'inversent, et justify-content devient vertical.

Q: Pourquoi mon élément flex déborde-t-il de son conteneur ?

Un élément flex a min-width: auto par défaut : il refuse de rétrécir sous la largeur de son mot le plus long ou de son enfant le plus large. Définissez min-width: 0 (ou overflow: hidden) sur l'élément pour le laisser rétrécir, par exemple pour que text-overflow: ellipsis fonctionne.

Q: Flexbox fonctionne-t-il sur des éléments inline comme span ?

Oui. Tout élément avec display: flex est un conteneur flex, et ses enfants deviennent des éléments flex quelle que soit leur propre valeur de display : des enfants cessent donc d'être inline et acceptent largeur, hauteur et marges comme des blocs.

Ce que fait display: flex

Placez display: flex sur un parent et ses enfants directs s'alignent sur une ligne, côte à côte, étirés à la même hauteur. Cette seule déclaration remplace les flottants, inline-block et la plupart des astuces de positionnement pour disposer une rangée d'éléments.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>display flex</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { background: #e5e7eb; padding: 8px; margin-bottom: 12px; }
    .flex { display: flex; gap: 8px; }
    .item { background: #2563eb; color: white; padding: 10px 14px; }
    .tall { padding-block: 24px; }
  </style>
</head>
<body>
  <p>Without flex (normal block layout):</p>
  <div class="box">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
  <p>With display: flex:</p>
  <div class="box flex">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Dans la première boîte, chaque div occupe une ligne entière. Dans la seconde, les trois éléments tiennent sur une ligne, chacun aussi large que son contenu, et One et Three s'étirent à la hauteur de Two. Seul le parent a changé : display: flex se place sur le conteneur, jamais sur les éléments.

Bac à sable flexbox

Choisissez des valeurs et regardez les éléments bouger. La ligne de code sous la boîte est le CSS de ce que vous voyez, et la liste en dessous indique où le navigateur a réellement placé chaque élément, mesuré avec getBoundingClientRect().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
    #box { display: flex; height: 170px; background: #e5e7eb; border: 2px solid #111827; }
    .item { background: #2563eb; color: white; width: 60px; padding: 8px; box-sizing: border-box; }
    .item:nth-child(2) { background: #16a34a; height: 80px; }
    .item:nth-child(3) { background: #f59e0b; height: 50px; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>flex-direction <select data-p="flex-direction"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select></label>
    <label>justify-content <select data-p="justify-content"><option>flex-start</option><option>center</option><option>flex-end</option><option>space-between</option><option>space-around</option><option>space-evenly</option></select></label>
    <label>align-items <select data-p="align-items"><option>stretch</option><option>flex-start</option><option>center</option><option>flex-end</option><option>baseline</option></select></label>
    <label>gap <select data-p="gap"><option>0px</option><option>8px</option><option>24px</option></select></label>
  </div>
  <div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <pre id="out"></pre>
  <script>
    const box = document.getElementById('box');
    const selects = document.querySelectorAll('select');
    const update = () => {
      const css = [];
      selects.forEach((s) => { box.style.setProperty(s.dataset.p, s.value); css.push(s.dataset.p + ': ' + s.value + ';'); });
      const b = box.getBoundingClientRect();
      const places = [...box.children].map((el) => {
        const r = el.getBoundingClientRect();
        return el.textContent + ': x ' + Math.round(r.left - b.left - 2) + ', y ' + Math.round(r.top - b.top - 2) + ', ' + Math.round(r.width) + ' x ' + Math.round(r.height);
      });
      document.getElementById('out').textContent = '.box { display: flex; ' + css.join(' ') + ' }\n' + places.join('\n');
    };
    selects.forEach((s) => s.addEventListener('change', update));
    update();
  </script>
</body>
</html>

À essayer :

justify-content: space-between : l'élément 1 se place à x 0 et l'élément 3 touche le bord opposé.
align-items: center : les trois éléments gardent leur propre hauteur et leurs centres s'alignent. Avec la valeur par défaut stretch, l'élément 1 n'a pas de hauteur propre et remplit les 170px du conteneur.
flex-direction: column : justify-content déplace maintenant les éléments verticalement et align-items horizontalement. Les deux propriétés suivent les axes, pas l'écran.

Axe principal et axe secondaire

Tout conteneur flex a deux axes. L'axe principal est la direction dans laquelle les éléments s'écoulent, définie par flex-direction. L'axe secondaire le traverse.

`flex-direction`	Axe principal	Axe secondaire	`justify-content` déplace les éléments	`align-items` déplace les éléments
`row` (par défaut)	horizontal, dans le sens de lecture	vertical	horizontalement	verticalement
`row-reverse`	horizontal, inversé	vertical	horizontalement	verticalement
`column`	vertical, de haut en bas	horizontal	verticalement	horizontalement
`column-reverse`	vertical, de bas en haut	horizontal	verticalement	horizontalement

Sur une page de droite à gauche (dir="rtl"), row commence au bord droit, car l'axe principal suit le sens d'écriture.

Les propriétés du conteneur

Elles se placent sur l'élément qui a display: flex :

Propriété	Rôle	Par défaut
`flex-direction`	Ligne ou colonne, et dans quel sens	`row`
`flex-wrap`	Si les éléments passent à la ligne quand la place manque	`nowrap`
`flex-flow`	Raccourci de `flex-direction` et `flex-wrap`	`row nowrap`
`justify-content`	Placement et espacement le long de l'axe principal	`normal` (se comporte comme `flex-start`)
`align-items`	Placement des éléments le long de l'axe secondaire	`normal` (se comporte comme `stretch`)
`align-content`	Espacement entre les lignes quand les éléments passent à la ligne	`normal`
`gap`	Espace entre les éléments (`row-gap`, `column-gap`)	`0`

justify-content et align-items ont chacun leur page avec toutes les valeurs : justify-content et align-items. Le retour à la ligne et la direction sont sur la page flex-wrap.

Les propriétés des éléments : flex-grow, flex-shrink, flex-basis

Elles se placent sur les enfants et décident comment ils se partagent la largeur du conteneur :

flex-basis : la taille de départ d'un élément avant le partage de l'espace libre (auto signifie « utiliser ma largeur ou mon contenu »).
flex-grow : combien de parts de l'espace restant l'élément prend. 0 signifie qu'il ne grandit jamais.
flex-shrink : combien l'élément cède quand la place manque. 0 signifie qu'il ne rétrécit jamais.

Le raccourci flex définit les trois :

Vous écrivez	Ce qui signifie	Comportement
`flex: initial` (par défaut)	`0 1 auto`	Taille du contenu, peut rétrécir, ne grandit jamais
`flex: 1`	`1 1 0%`	Part de zéro et prend une part égale de l'espace
`flex: auto`	`1 1 auto`	Taille du contenu plus une part de l'espace restant
`flex: none`	`0 0 auto`	Exactement son contenu ou sa largeur, ne grandit ni ne rétrécit
`flex: 2`	`2 1 0%`	Deux fois la part d'un élément avec `flex: 1`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex grow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; width: 480px; background: #e5e7eb; padding: 8px; margin-bottom: 8px; }
    .row div { background: #2563eb; color: white; padding: 8px 0; text-align: center; }
    .one { flex: 1; }
    .row .two { flex: 2; background: #16a34a; }
    .row .none { flex: none; width: 100px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row"><div class="one">flex: 1</div><div class="one">flex: 1</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="one">flex: 1</div><div class="two">flex: 2</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="none">flex: none</div><div class="one">flex: 1</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.row')].map((row) =>
      [...row.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(' + ')
    ).join(' | ');
  </script>
</body>
</html>

Chaque rangée fait 480px de large à l'intérieur de son padding, et les deux espaces de 8px laissent 464px aux éléments. Les largeurs affichées montrent le partage : environ 155px chacun dans la première rangée, 116 + 232 + 116 dans la deuxième (l'élément flex: 2 reçoit deux fois la part de chacun de ses voisins), et 100 + 372 dans la troisième, où l'élément flex: none garde sa largeur et l'autre prend tout le reste.

De vraies mises en page avec flexbox

Un en-tête avec un logo au début et des liens à la fin est la mise en page flex la plus courante. margin-inline-start: auto sur un élément absorbe tout l'espace libre avant lui et le pousse, avec tout ce qui suit, jusqu'à la fin :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nav bar</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #111827; }
    nav a { color: white; text-decoration: none; }
    .logo { font-weight: 700; font-size: 20px; }
    .push { margin-inline-start: auto; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <nav>
    <a class="logo" href="#">Logo</a>
    <a class="push" href="#">Docs</a>
    <a href="#">Pricing</a>
    <a class="cta" href="#">Sign up</a>
  </nav>
</body>
</html>

align-items: center aligne le texte plus grand du logo avec les liens, et gap espace les liens sans marges à annuler sur le dernier.

Un deuxième schéma courant est la rangée média : une icône de taille fixe et un texte qui prend le reste et passe à la ligne dans sa propre colonne.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media object</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .media { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
    .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #16a34a; }
    .text { flex: 1; min-width: 0; margin: 0; }
  </style>
</head>
<body>
  <div class="media">
    <div class="avatar"></div>
    <p class="text">This text wraps next to the circle. However long it gets, the circle keeps its 48px size because it has flex: none.</p>
  </div>
</body>
</html>

flex: none est la garantie. Les éléments flex rétrécissent par défaut : si vous le retirez du cercle et retirez aussi flex: 1 du texte, le paragraphe comprime le cercle jusqu'à environ 23px de large, ce qui donne un ovale. Pour centrer un élément dans une boîte, flexbox tient en deux lignes (justify-content: center; align-items: center) ; la page pour centrer une div le compare aux autres méthodes.

order et accessibilité

La propriété order et les directions -reverse changent l'endroit où les éléments apparaissent, pas leur place dans le HTML. Les lecteurs d'écran et la touche Tab suivent toujours l'ordre du HTML, si bien qu'un utilisateur du clavier peut sauter du premier lien affiché au dernier. Ne les utilisez que pour la décoration ; quand l'ordre a un sens, modifiez le HTML.

Flexbox ou grid

Flexbox travaille dans une seule direction à la fois : les éléments d'une ligne se dimensionnent selon leur contenu, et une seconde ligne (avec retour à la ligne) ne s'aligne pas sur la première. Grid travaille dans les deux : vous définissez des colonnes et des lignes, et les éléments s'y calent. Une barre de navigation, une barre d'outils ou une ligne de formulaire relèvent de flexbox ; une galerie ou une page avec une barre latérale relèvent de grid.

Erreurs courantes

display: flex sur l'élément au lieu du parent. C'est le conteneur qui reçoit display: flex ; ses enfants sont les éléments.
Attendre de align-items qu'il déplace les éléments verticalement sans hauteur. Si le conteneur n'est pas plus haut que son élément le plus haut, il n'y a pas de place pour bouger. Donnez une hauteur au conteneur ; sinon, la propriété fonctionne mais n'a simplement rien à faire.
Un texte qui déborde au lieu de rétrécir. Les éléments flex ont min-width: auto. Ajoutez min-width: 0 à l'élément qui doit rétrécir.
Utiliser flex: 1 et s'étonner que les largeurs diffèrent. Les éléments flex: 1 se partagent l'espace à parts égales, mais un élément dont le contenu ne peut pas tenir (une longue URL, une image) ne rétrécit pas en dessous. min-width: 0 règle aussi ce cas.
Des marges entre les éléments. Utilisez gap sur le conteneur ; il ne se place qu'entre les éléments.
Imbriquer du flex inutilement. Seuls les enfants directs sont des éléments flex. Les petits-enfants suivent la mise en page normale, sauf si leur propre parent a aussi display: flex.

Questions fréquentes

Que fait display: flex ?

Il transforme un élément en conteneur flex. Ses enfants directs deviennent des éléments flex, placés par défaut en ligne, côte à côte et étirés à la même hauteur, et des propriétés comme justify-content, align-items et gap contrôlent la façon dont ils se partagent l'espace.

Que signifie flex: 1 ?

flex: 1 est le raccourci de flex: 1 1 0% : l'élément peut grandir (flex-grow: 1), peut rétrécir (flex-shrink: 1) et part d'une taille nulle (flex-basis: 0%). Des éléments qui ont tous flex: 1 se partagent l'espace libre à parts égales et finissent donc avec la même largeur, sauf si leur contenu ne peut pas tenir.

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

justify-content place les éléments le long de l'axe principal (horizontalement sur une ligne), et align-items le long de l'axe secondaire (verticalement sur une ligne). Avec flex-direction: column, les deux axes s'inversent, et justify-content devient vertical.

Faut-il utiliser flexbox ou grid ?

Utilisez flexbox pour une seule ligne ou colonne dont les éléments se dimensionnent selon leur contenu : barres de navigation, groupes de boutons, étiquette à côté d'un champ. Utilisez grid quand vous voulez des lignes et des colonnes alignées entre elles, comme une grille de cartes ou la mise en page d'une page.

Pourquoi mon élément flex déborde-t-il de son conteneur ?

Un élément flex a min-width: auto par défaut : il refuse de rétrécir sous la largeur de son mot le plus long ou de son enfant le plus large. Définissez min-width: 0 (ou overflow: hidden) sur l'élément pour le laisser rétrécir, par exemple pour que text-overflow: ellipsis fonctionne.

Flexbox fonctionne-t-il sur des éléments inline comme span ?

Oui. Tout élément avec display: flex est un conteneur flex, et ses enfants deviennent des éléments flex quelle que soit leur propre valeur de display : des enfants <span> cessent donc d'être inline et acceptent largeur, hauteur et marges comme des blocs.

Concepts liés