Qu’est-ce que display: inline-flex

Flexbox est devenu un incontournable de la mise en page web quotidienne. Tout développeur front-end connaît et utilise display: flex. Mais cette propriété a un parent moins connu, display: inline-flex. On en parle rarement et on l’utilise encore moins. C’est une erreur.

La différence tient en une phrase: inline-flex crée un conteneur flex qui se comporte lui-même comme un élément en ligne. Ses enfants sont des éléments flex ordinaires, avec toutes les capacités de Flexbox. Le parent, en revanche, ne prend pas toute la largeur disponible de la ligne. Il s’ajuste à la taille de son contenu et se place sur la même ligne que les éléments voisins.

La situation est exactement la même qu’avec le couple display: block et display: inline-block. Un élément bloc prend toute la ligne, un élément en ligne ne prend que ce dont le contenu a besoin. Le même principe s’applique ici: flex définit un conteneur flex de niveau bloc, tandis que inline-flex en définit un de niveau en ligne.

En pratique, cela ouvre des scénarios qui, avec un flex classique, exigeraient des wrappers supplémentaires, des astuces de largeur ou des reliques de float.

💡 **Aperçu rapide:

• display: inline-flex crée un conteneur flex qui se comporte comme un élément en ligne et ne prend pas toute la ligne. La largeur d’un tel conteneur est déterminée par son contenu, pas par son parent.
• Toutes les propriétés flex fonctionnent à l’intérieur d’un inline-flex exactement de la même manière qu’avec un display: flex classique. Il n’y a aucune différence dans la disposition des enfants; la seule différence réside dans le comportement externe du conteneur.
• Le cas d’usage principal: badges, tags et boutons avec icônes, où un simple inline-flex sur l’élément remplace la combinaison d’un parent flex et d’un enfant inline. Vous obtenez un centrage du contenu sans wrappers supplémentaires.
• D’autres valeurs de display ont aussi des équivalents en ligne: inline-block, inline-table et inline-grid fonctionnent sur le même principe. La logique de disposition interne est préservée; seul le comportement externe du conteneur change.

Cas concret: des badges avec icônes

Imaginez une tâche typique. Une page a besoin d’une rangée de badges. Chacun comporte une icône et un texte, l’icône étant centrée verticalement et horizontalement à l’intérieur d’un cercle coloré. Les badges eux-mêmes se placent en ligne comme du texte normal et passent à la ligne suivante quand ils n’ont plus de place.

Si vous mettez display: flex sur les badges, chacun s’étirera sur toute la largeur du parent. Les badges s’empileront en colonne, pas en ligne. Vous pouvez corriger cela avec un wrapper qui a display: flex sur le parent. Mais pourquoi ajouter un wrapper supplémentaire quand vous avez inline-flex?

La structure HTML est élémentaire:

1
<div class="badges-list">
2
  <span class="c-badge">
3
    <svg class="c-icon" width="24" height="24">...</svg>
4
  </span>
5
  <span class="c-badge">
6
    <svg class="c-icon" width="24" height="24">...</svg>
7
  </span>
8
  <!-- other badges -->
9
</div>

Notez que le wrapper .badges-list ne fait rien pour le positionnement en ligne. C’est le .c-badge lui-même qui le gère.

Le CSS du badge:

1
.c-badge {
2
  display: inline-flex;
3
  justify-content: center;
4
  align-items: center;
5
}

C’est tout. Chaque badge est un conteneur flex avec un comportement en ligne. L’icône à l’intérieur est centrée avec justify-content et align-items. Les badges eux-mêmes s’alignent en ligne et passent à la ligne suivante quand la largeur est insuffisante. Exactement ce que le design exigeait, sans wrappers supplémentaires.

Inline-flex vs flex: une comparaison visuelle

La meilleure façon de comprendre la différence est d’observer deux ensembles identiques de conteneurs, l’un avec display: flex et l’autre avec display: inline-flex.

Exemple 1: display: flex

Trois conteneurs parents avec un fond bleu. À l’intérieur de chacun se trouvent trois enfants rouges avec flex: 1. Les parents ont display: flex.

Résultat: chaque conteneur bleu prend toute la ligne. Les enfants à l’intérieur s’étirent pour avoir une largeur égale. Les conteneurs sont empilés en colonne, l’un en dessous de l’autre.

1
.container--flex {
2
  display: flex;
3
}
4
 
5
.container--flex > div {
6
  flex: 1;
7
}

Exemple 2: display: inline-flex

Les trois mêmes conteneurs, mais avec display: inline-flex. Les enfants ont min-width: 50px ajouté pour que le conteneur ne se réduise pas à zéro.

1
.container--inline-flex {
2
  display: inline-flex;
3
}
4
 
5
.container--inline-flex > div {
6
  flex: 1;
7
  min-width: 50px;
8
}

Résultat: les conteneurs se placent sur une seule ligne. Chacun prend exactement la largeur dont ses enfants ont besoin (50px × 3 = 150px). Ils se comportent comme des mots dans une phrase et ne passent à la ligne suivante que lorsque l’espace vient à manquer.

Le point clé à retenir: pour les éléments flex à l’intérieur du conteneur, il n’y a absolument aucune différence. Des propriétés comme justify-content et align-items, ainsi que gap et flex-direction, fonctionnent de manière identique. La seule différence est la manière dont le conteneur lui-même interagit avec le monde extérieur: comme un bloc ou comme un élément en ligne.

Quand utiliser inline-flex: 4 scénarios

Toutes les mises en page n’exigent pas inline-flex. Mais il y a des situations où il résout la tâche de manière plus élégante que la combinaison flex + wrapper.

1. Une liste de tags ou de badges. Le cas d’usage le plus courant. Chaque tag est un conteneur flex avec une icône et un texte centrés. Les tags eux-mêmes s’écoulent en ligne avec retour à la ligne automatique. inline-flex sur le tag, et aucun wrapper nécessaire.

2. Des boutons avec icônes dans une ligne de texte. Quand un bouton d’action (copier, ouvrir, supprimer) se trouve directement à l’intérieur d’un paragraphe ou d’un titre. inline-flex vous permet de centrer l’icône dans le bouton sans sortir le bouton du flux du texte.

3. Une barre d’outils en ligne. Un ensemble de boutons de formatage dans un éditeur WYSIWYG. Chaque bouton est un conteneur inline-flex avec une icône à l’intérieur. Tous les boutons se placent en ligne et passent naturellement à la ligne suivante.

4. Centrage vertical dans un contexte en ligne. Un point noir classique en CSS: centrer une icône verticalement par rapport au texte adjacent. vertical-align: middle fonctionne de manière aléatoire. inline-flex avec align-items: center fonctionne à tous les coups.

Voici le code pour les scénarios 2 et 3, pour qu’ils ne restent pas théoriques.

Bouton avec icône dans le texte (scénario 2). Supposons que vous ayez besoin d’un bouton «copier» à l’intérieur d’un paragraphe. Il doit rester dans le flux du texte et ne pas casser la ligne. Voici le CSS minimal:

1
.inline-action-btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 24px;
6
  height: 24px;
7
  border: none;
8
  background: transparent;
9
  cursor: pointer;
10
  vertical-align: middle;
11
}

Trois lignes de centrage flexbox, et l’icône à l’intérieur du bouton est alignée sur les deux axes. Pas d’astuces de line-height, pas de position: relative combiné à transform. Le bouton se place dans le texte comme un mot parmi d’autres.

Barre d’outils (scénario 3). Un éditeur WYSIWYG typique: les boutons gras, italique et lien se placent en ligne. Chaque bouton est un conteneur inline-flex:

1
.toolbar__btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 32px;
6
  height: 32px;
7
  border-radius: 4px;
8
}

Les boutons passent à la ligne quand la fenêtre se réduit, sans wrappers supplémentaires. Pour la barre d’outils parente, display: flex avec flex-wrap: wrap et gap: 4px fonctionne bien. Vous obtenez une composition flex à deux niveaux: le conteneur extérieur gère la rangée de boutons, et chaque bouton centre son icône.

Pièges de inline-flex

Trois situations non évidentes qui font gagner des heures dans les DevTools.

Espaces blancs entre les éléments. Comme inline-block, les éléments avec inline-flex sont sensibles aux espaces blancs dans le HTML. Trois éléments <span> avec inline-flex sur des lignes séparées auront un écart de 4 à 5 pixels. La solution: font-size: 0 sur le parent avec restauration sur les enfants, suppression des espaces blancs entre les balises, ou une combinaison de display: flex sur le parent et inline-flex sur les enfants.

text-align ne fonctionne pas sur les enfants flex. Pour inline-block, les éléments sont alignés via text-align: center sur le parent. Avec inline-flex, cette technique ne fonctionne que tant que les enfants ne sont pas eux-mêmes devenus des conteneurs flex. Les éléments flex ne réagissent pas à text-align. Alignez les conteneurs via justify-content sur un parent flex ou margin: auto.

Direction flex par défaut. inline-flex, comme display: flex, dispose les enfants en ligne par défaut (flex-direction: row). Si vous attendez une colonne à l’intérieur d’un conteneur en ligne, définissez explicitement flex-direction: column. La spécification ne lit pas dans les pensées du développeur.

Famille: les autres variantes de display en ligne

inline-flex a des frères conceptuels. Presque chaque valeur de display de type bloc a un équivalent en ligne:

Le mécanisme est partout le même: la logique de disposition interne est entièrement préservée, seul le comportement externe du conteneur change. Avec inline-grid, l’histoire est la même: un conteneur de grille qui se place en ligne plutôt que de prendre toute la largeur du parent.

En pratique, inline-flex est plus souvent utilisé que inline-grid. La raison est simple: les conteneurs flex sont plus couramment nécessaires pour de petits composants (badge, bouton, groupe d’icônes), où le comportement en ligne est exactement ce qu’il faut. Les mises en page en grille sont plus souvent appliquées à de grands blocs structurels, où le comportement inline n’a pas d’utilité.

La prise en charge de inline-flex par les navigateurs est pratiquement complète. La propriété est apparue dans la spécification Flexible Box Layout Module Level 1 (Recommandation Candidate du W3C, 2016) et fonctionne dans tous les navigateurs modernes: Chrome depuis la version 29 (2013), Firefox depuis la version 20 (2013), Safari depuis la version 9 (2015) et Edge depuis la version 12 (2015). Internet Explorer 11 prend en charge inline-flex avec des réserves, mais selon les données de StatCounter pour 2025, la part d’IE11 est inférieure à 0,1% du marché mondial. Pour les projets qui doivent supporter IE11, testez inline-flex manuellement: ce navigateur a un comportement imprévisible avec certains bugs de flex-basis et min-height.

⁉️🤔 Foire aux questions

Quelle est la différence entre display: inline-flex et display: flex?

display: flex crée un conteneur flex de niveau bloc qui prend toute la largeur disponible de la ligne. display: inline-flex crée un conteneur flex de niveau en ligne dont la largeur est déterminée par son contenu et qui peut se placer sur la même ligne que d’autres éléments. Pour les enfants à l’intérieur du conteneur, il n’y a aucune différence: toutes les propriétés flex fonctionnent de la même manière dans les deux cas.

Quand inline-flex est-il meilleur que inline-block?

inline-block ne vous donne aucun contrôle sur l’alignement des enfants. Si vous devez centrer une icône à l’intérieur d’un bouton à la fois verticalement et horizontalement, inline-block vous obligera à vous souvenir des astuces de line-height et de vertical-align. inline-flex avec justify-content: center et align-items: center le fait sans contorsions.

Peut-on utiliser gap avec inline-flex?

Oui, gap fonctionne dans inline-flex exactement de la même manière que dans un flex classique. Vous définissez l’espacement entre les éléments flex, et le navigateur l’applique, que le conteneur soit de niveau bloc ou de niveau en ligne. Prise en charge de gap dans flexbox: tous les navigateurs modernes depuis 2021.

Est-ce que inline-flex affecte les conteneurs flex imbriqués?

Non. La propriété display n’est pas héritée. Si un élément avec display: flex se trouve à l’intérieur d’un conteneur inline-flex, il sera un conteneur flex de niveau bloc ordinaire. Le comportement en ligne s’applique uniquement à l’élément sur lequel vous avez explicitement défini inline-flex.

*inline-flex** et accessibilité: y a-t-il des pièges?*

Les lecteurs d’écran ne font aucune distinction entre flex et inline-flex. Les deux valeurs n’affectent que la disposition visuelle et ne changent ni la sémantique ni l’ordre de lecture. La propriété flex order modifie l’ordre visuel mais pas l’ordre dans l’arbre d’accessibilité; cela est vrai pour les deux valeurs de display.

Que choisir: flex ou inline-flex

Le choix se résume à une question simple: le conteneur doit-il se placer en ligne avec ses voisins ou prendre toute la largeur de son parent?

Si vous stylisez un composant (badge, bouton avec icône, tag, élément de barre d’outils), utilisez inline-flex. Vous obtiendrez le centrage flex du contenu tout en préservant le comportement naturel en ligne, sans wrappers supplémentaires.

Si vous stylisez une section, une carte, un en-tête, un pied de page ou une mise en page, restez sur display: flex. Le comportement bloc est approprié ici: le conteneur doit occuper sa ligne, pas se glisser entre les éléments voisins.

La règle d’or: ouvrez les DevTools et regardez l’élément. S’il est sur une ligne avec d’autres, utilisez inline-flex. S’il est sur sa propre ligne, utilisez flex. C’est aussi simple que cela.