Vous avez une rangée d'éléments. Vous voulez les centrer. Vous ajoutez text-align: center, puis margin: 0 auto, puis peut-être vertical-align: middle — et rien ne fonctionne comme prévu. Cette frustration a poussé toute une génération de développeurs vers CSS Flexbox, et pour cause. Flexbox a résolu l'alignement d'une manière qui fait enfin sens. Notre Flexbox Playground vous permet de voir exactement ce que chaque propriété fait, d'expérimenter avec un retour visuel en temps réel, et de copier le code généré directement dans votre projet.
Pourquoi Flexbox reste incontournable en 2026
CSS Grid attire beaucoup l'attention ces derniers temps, et à juste titre. Mais Flexbox ne va nulle part. Il reste le meilleur outil pour les layouts unidimensionnels — et la majorité du design au niveau des composants est exactement cela. Barres de navigation, intérieurs de cartes, rangées de formulaires, groupes de boutons, barres d'outils : ce sont tous des arrangements linéaires d'éléments le long d'un seul axe.
Flexbox n'est pas une technologie du passé. C'est le socle de presque chaque composant que vous utilisez au quotidien. Même à l'intérieur des layouts Grid, les cellules individuelles utilisent typiquement Flexbox pour aligner leur contenu.
Quand choisir Flexbox
- Les composants internes — Aligner une icône, un label et un badge dans un bouton.
- Les barres de navigation — Distribuer les liens horizontalement avec un espacement flexible.
- Les layouts de cartes — Empiler le contenu verticalement avec un footer poussé vers le bas.
- Le wrapping responsive — Laisser les éléments passer à la ligne sans media queries.
- Centrer n'importe quoi — Le fameux pattern de centrage en deux lignes qui a tout changé.
Le modèle mental Flexbox : les axes sont la clé
Le concept le plus important de Flexbox est le modèle d'axes. Une fois que vous l'avez intériorisé, chaque propriété devient limpide.
Axe principal vs axe transversal
Quand vous définissez display: flex, le conteneur établit deux axes :
- Axe principal (main axis) — La direction dans laquelle les éléments s'écoulent. Contrôlé par
flex-direction. Par défaut, il va de gauche à droite (row). - Axe transversal (cross axis) — Perpendiculaire à l'axe principal. Si l'axe principal est horizontal, l'axe transversal est vertical, et inversement.
C'est là que réside la plupart de la confusion. Quand vous passez flex-direction de row à column, les axes permutent. Cela signifie que justify-content (qui opère toujours sur l'axe principal) contrôle soudain la distribution verticale au lieu d'horizontale. Et align-items (qui opère toujours sur l'axe transversal) contrôle maintenant l'alignement horizontal.
Les propriétés ne changent pas de comportement. Les axes pivotent sous elles. Ouvrez le Flexbox Playground, basculez entre row et column, et observez comment justify-content et align-items se réorientent. C'est le moment "eurêka" qui rend Flexbox intuitif.
Les six valeurs de justify-content
Le long de l'axe principal, vous avez un contrôle précis sur la distribution de l'espace restant :
flex-start— Les éléments se tassent au début. Pas d'espace supplémentaire.flex-end— Les éléments se tassent à la fin.center— Les éléments se regroupent au milieu.space-between— Espace égal entre les éléments, aucun aux bords.space-around— Espace égal autour de chaque élément (les bords reçoivent un demi-espace).space-evenly— Espace véritablement égal partout, bords inclus.
La différence entre space-between, space-around et space-evenly est subtile mais critique pour des interfaces soignées. Utilisez le playground pour les comparer côte à côte.
align-items sur l'axe transversal
L'alignement sur l'axe transversal contrôle comment les éléments se positionnent dans la hauteur du conteneur (ou la largeur, en mode colonne) :
stretch— Les éléments s'étirent pour remplir le conteneur. C'est la valeur par défaut, et elle surprend souvent.flex-start/flex-end— Les éléments se collent à un bord.center— Les éléments se centrent sur l'axe transversal.baseline— Les éléments s'alignent sur leurs lignes de base typographiques. Essentiel pour la typographie de tailles mixtes.
Patterns de layout courants avec Flexbox
Passons en revue les patterns concrets que vous utiliserez constamment.
La barre de navigation
Une navbar horizontale est le cas d'usage canonique de Flexbox. Le pattern est direct :
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
Logo à gauche, liens à droite, tout centré verticalement. C'est le preset Spread dans notre Flexbox Playground. Le même pattern anime les composants de navigation dans des produits comme Guthly et WePlanify, où le header doit accueillir un logo, des liens de navigation et des actions utilisateur dans une seule rangée flexible.
Le hero centré
Centrer du contenu à la fois horizontalement et verticalement nécessitait autrefois des hacks. Avec Flexbox, ce sont deux propriétés :
display: flex;
justify-content: center;
align-items: center;
C'est tout. Le preset Centered démontre ce pattern. Il fonctionne pour les sections hero, les états de chargement, les états vides et le contenu des modales.
Le layout "holy grail"
Le classique header-sidebar-contenu-footer fonctionne élégamment avec des conteneurs Flexbox imbriqués :
/* Conteneur externe : pile verticale */
display: flex;
flex-direction: column;
min-height: 100vh;
/* Rangée du milieu : sidebar + contenu */
.middle {
display: flex;
flex-direction: row;
flex: 1 1 0%;
}
.sidebar {
flex: 0 0 250px;
}
.content {
flex: 1 1 0%;
}
Le preset Sidebar dans le playground vous permet d'expérimenter avec cette structure. Définissez un élément à flex-grow: 0 avec une basis fixe, et l'autre à flex-grow: 1 — la zone de contenu absorbe tout l'espace restant.
La rangée de cartes avec wrapping
Pour une collection de cartes qui passe à la ligne quand le viewport se réduit :
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
Chaque carte reçoit une largeur minimale via flex-basis, et la propriété wrap gère le comportement responsive. Aucune media query nécessaire. Le preset Wrap Grid démontre parfaitement ce pattern.
Comprendre flex-grow, flex-shrink et flex-basis
Ces trois propriétés sont le coeur du dimensionnement des éléments Flexbox, et elles piègent même les développeurs expérimentés.
flex-basis : le point de départ
flex-basis définit la taille idéale d'un élément avant toute expansion ou contraction. Considérez-le comme une suggestion au navigateur : "Commence ici, puis ajuste."
auto— Utilise la taille du contenu ou la largeur/hauteur explicite de l'élément.0%— Ignore complètement la taille du contenu. Distribue l'espace purement selonflex-grow.200pxou50%— Commence exactement à cette taille.
flex-grow : réclamer l'espace supplémentaire
Quand le conteneur a de l'espace restant après que tous les éléments ont atteint leur flex-basis, flex-grow détermine comment ce surplus est distribué. Un élément avec flex-grow: 2 reçoit deux fois plus d'espace supplémentaire qu'un élément avec flex-grow: 1.
L'insight critique : flex-grow ne définit pas des largeurs proportionnelles. Il distribue l'espace restant proportionnellement. Si les éléments ont des valeurs flex-basis différentes, les tailles finales ne correspondront pas aux ratios de flex-grow.
Pour obtenir un dimensionnement véritablement proportionnel, définissez flex-basis: 0% sur tous les éléments et utilisez flex-grow pour les ratios. C'est exactement ce que fait flex: 1 (raccourci pour flex: 1 1 0%).
flex-shrink : céder sous la pression
Quand les éléments débordent du conteneur, flex-shrink contrôle combien chaque élément se compresse. La valeur par défaut est 1, ce qui signifie que tous les éléments rétrécissent également. Définissez flex-shrink: 0 sur un élément pour le rendre rigide — il ne rétrécira pas en dessous de sa basis.
C'est vital pour les layouts avec sidebar : la sidebar a flex-shrink: 0 pour maintenir sa largeur, tandis que la zone de contenu a flex-shrink: 1 pour absorber la compression.
Expérimenter dans le playground
Cliquez sur n'importe quel élément dans notre Flexbox Playground pour ouvrir l'éditeur d'élément. Ajustez grow, shrink, basis et order indépendamment pour chaque élément. Observez comment la modification des propriétés d'un élément affecte l'ensemble du layout. Ce retour interactif est la manière la plus rapide de construire une intuition pour ces propriétés.
La propriété gap : la solution moderne d'espacement
Avant que gap n'arrive en Flexbox, espacer les éléments nécessitait des hacks de marge — typiquement margin-right sur tous les éléments sauf le dernier, ou des marges négatives sur le conteneur. Ces approches étaient fragiles et verbeuses.
La propriété gap est propre et prévisible :
display: flex;
gap: 16px;
L'espace apparaît entre les éléments, jamais aux bords. Elle fonctionne aussi avec flex-wrap : les espaces entre rangées et colonnes sont gérés uniformément. Notre playground vous permet de glisser un curseur de 0 à 48px pour voir l'effet en temps réel.
Dans l'écosystème Eguth, des valeurs de gap cohérentes font partie des tokens de design partagés. Que vous construisiez une barre d'outils dans GuthSearch ou un layout de formulaire dans GutHub, la même échelle d'espacement s'applique, garantissant la cohérence visuelle entre les produits.
Patterns responsives sans media queries
L'une des plus grandes forces de Flexbox est de permettre un comportement responsive sans une seule règle @media.
flex-wrap avec flex-basis
Donnez à chaque élément une largeur minimale via flex-basis et activez flex-wrap: wrap. Les éléments passeront à la ligne quand ils ne peuvent plus tenir :
display: flex;
flex-wrap: wrap;
gap: 16px;
.item {
flex: 1 1 300px;
}
Chaque élément démarre à 300px. Sur les grands écrans, plusieurs éléments tiennent sur une rangée et s'étendent pour remplir l'espace. Sur les petits écrans, ils s'empilent naturellement. Ce pattern anime les layouts de cartes dans Dropee et les grilles de modules d'apprentissage qui s'adaptent sans effort du bureau au mobile.
L'astuce du min-width
Combinez flex-grow: 1 avec un min-width sur un élément et flex-shrink: 0 sur un autre pour créer une sidebar qui se replie en dessous d'un seuil :
.sidebar {
flex: 0 0 250px;
}
.content {
flex: 1 1 0%;
min-width: 0;
}
Le min-width: 0 est important. Par défaut, les éléments flex ne rétrécissent pas en dessous de la taille de leur contenu. Ce reset permet à la zone de contenu de se comprimer correctement et empêche le débordement horizontal.
Order pour la réorganisation mobile
La propriété order vous permet de réarranger visuellement les éléments sans modifier le DOM. Un pattern courant : sur mobile, le contenu principal apparaît avant la sidebar, même si la sidebar vient en premier dans le markup. Le curseur d'ordre du playground rend cela facile à tester.
Flexbox dans les interfaces produit
Chez Eguth, Flexbox est le cheval de bataille du layout de composants à travers chaque produit de l'écosystème :
- Guthly utilise Flexbox pour les cartes d'habitudes, les affichages de séries et les barres d'action du dashboard où les éléments doivent se distribuer uniformément.
- WePlanify s'appuie sur Flexbox pour les barres d'outils de planification de voyage et les avatars de participants qui s'enroulent gracieusement sur les petits écrans.
- GuthSearch aligne les champs de saisie de recherche, les badges de filtres et les métadonnées des résultats avec des rangées Flexbox.
- Dropee structure ses cartes d'apprentissage gamifié et ses indicateurs de progression comme des conteneurs flex.
- GutHub organise les fils de collaboration et les boutons d'action avec des patterns d'espacement flexibles.
Ces composants partagent des tokens de design pour le gap, la direction et l'alignement, maintenant la cohérence visuelle même si chaque produit sert un objectif différent.
Erreurs courantes à éviter
Oublier min-width: 0
Les éléments flex ont un min-width: auto implicite, qui les empêche de rétrécir en dessous de la taille de leur contenu. Cela cause des bugs de débordement. Définissez toujours min-width: 0 (ou overflow: hidden) sur les éléments qui doivent rétrécir au-delà de leur contenu.
Utiliser flex-grow pour des colonnes proportionnelles
Définir flex-grow: 1 et flex-grow: 2 ne crée pas un ratio de largeur 1:2 à moins que flex-basis soit 0% sur les deux éléments. Si la basis est auto, le ratio de grow s'applique uniquement à l'espace restant.
Ignorer le stretch par défaut
align-items est par défaut à stretch, ce qui signifie que les éléments s'étendent pour remplir l'axe transversal. C'est souvent souhaitable, mais peut produire des éléments inattendument grands quand vous ne définissez pas de hauteur explicite.
Sur-imbriquer les conteneurs flex
Chaque élément n'a pas besoin d'être un conteneur flex. Si un simple display: block suffit pour le layout, n'ajoutez pas de complexité inutile. Flexbox est puissant, mais la retenue rend le code maintenable.
Bonnes pratiques pour Flexbox en production
- Utilisez le raccourci flex — Écrivez
flex: 1au lieu de définir séparémentflex-grow,flex-shrinketflex-basis. Le raccourci définit des valeurs par défaut sensées. - Préférez gap aux marges — C'est plus propre, plus prévisible, et fonctionne parfaitement avec le wrapping.
- Combinez Flexbox et Grid — Utilisez Grid pour le layout au niveau de la page et Flexbox pour l'intérieur des composants. Ils se complètent parfaitement.
- Testez avec des longueurs de contenu variables — Flexbox s'adapte au contenu, ce qui signifie qu'un label court et un label long produiront des résultats différents. Testez les cas limites.
- Utilisez des variables CSS pour l'espacement — Définissez
--gap-sm,--gap-md,--gap-lget utilisez-les de manière cohérente dans vos conteneurs flex.
Passez à la pratique
La théorie ne vous emmène que jusqu'à un certain point. Ouvrez le Flexbox Playground, sélectionnez un preset et commencez à expérimenter. Ajoutez des éléments, modifiez leurs propriétés flex, basculez entre les directions, et observez le layout réagir. Puis copiez le code CSS ou Tailwind généré dans votre projet.
Flexbox récompense l'exploration. Plus vous expérimentez avec différentes combinaisons de direction, justify, align et propriétés d'éléments, plus vite vous développez l'instinct pour construire des layouts qui fonctionnent du premier coup. Et avec un playground visuel offrant un retour instantané, cet instinct se développe rapidement.
Que vous aligniez un groupe de boutons dans Guthly, construisiez une navigation responsive dans WePlanify, ou structuriez des résultats de recherche dans GuthSearch, Flexbox vous donne le contrôle précis et flexible que les interfaces modernes exigent.