Pratiquer Flexbox interactivement avec overlay d'axes

Que fait le Flexbox Playground ?

Le playground construit des mises en page Flexbox de manière visuelle. À gauche, les champs pour les six propriétés du conteneur — flex-direction, justify-content, align-items, align-content, flex-wrap, gap — et à droite l’aperçu en direct avec de vrais items flex qui appliquent immédiatement vos réglages. Au clic sur un item, les overrides par item s’ouvrent : order, flex-grow, flex-shrink, flex-basis, align-self.

Au-dessus de l’aperçu, un curseur de largeur de conteneur règle la largeur de la scène de 240 px à 1200 px. Vous testez ainsi en secondes le comportement d’une même mise en page dans une barre latérale étroite ou dans une zone principale large — sans redimensionner la fenêtre du navigateur ni ouvrir les DevTools. C’est l’approche la plus rapide des container queries sans règle @container réelle.

Pourquoi un overlay dessine-t-il les axes ?

L’erreur la plus fréquente des débutants en Flexbox est l’inversion d’axes. Avec flex-direction: row, l’axe principal est horizontal, l’axe secondaire vertical. Dès que vous passez à column, les deux s’échangent. D’un coup, justify-content contrôle l’alignement vertical, align-items l’horizontal — et une mise en page qui fonctionnait vient de changer totalement. L’overlay d’axes dessine l’axe principal et l’axe secondaire actuels directement dans l’aperçu, avec flèches et libellés. Vous voyez immédiatement quelle propriété pilote quelle direction.

Dans la plupart des playgrounds concurrents, cet overlay manque. Résultat : les développeurs essaient des valeurs de justify-content au hasard parce qu’ils ne voient pas que l’axe passe à la verticale en column. Avec les axes visibles, l’essai-erreur devient réglage ciblé. Désactivable par une case à cocher en haut à droite si l’overlay gêne.

Comment se comportent flex-grow, flex-shrink et flex-basis ?

Ces trois propriétés forment le raccourci flex et décident comment les items distribuent ou cèdent de la place.

Propriété	Signification	Par défaut
flex-grow	À quel point un item revendique la place restante. 0 = pas du tout, 1 = se partage le reste, 2 = deux fois plus que 1.	0
flex-shrink	À quel point un item rétrécit quand la place manque. 0 = jamais en dessous de la base, 1 = se partage le manque.	1
flex-basis	Taille idéale avant distribution ou retrait. auto = taille du contenu, 0 = piloté entièrement par grow.	auto

Piège fréquent : flex-basis: 0 avec flex-grow: 1 (en bref flex: 1) répartit l’espace du conteneur de manière équivalente, mais des items à long contenu peuvent quand même déborder. Raison : les items ont par défaut min-width: auto, donc jamais plus petits que le contenu minimal intrinsèque. Correctif : poser min-width: 0 sur l’item. Le playground avertit automatiquement de cette combinaison.

Quand prendre Flexbox, quand CSS Grid ?

Flexbox et CSS Grid sont complémentaires, pas concurrents. Règle de pouce : Flexbox pour un axe, Grid pour deux.

Flexbox convient à :

• Barres de navigation, barres d’outils d’en-tête, barres d’onglets
• Cartes en rangée à hauteur égale
• Menus latéraux verticaux
• Contenu intérieur de modal centré
• Pied de page collant (conteneur flex-direction: column, main en flex-grow: 1)
• Mises en page de formulaire avec label à gauche / saisie à droite

Grid convient mieux à :

• Mises en page de pages entières avec sidebar, header, main, footer
• Grilles de cartes avec espacements identiques dans les deux directions
• Mises en page magazine avec zones traversantes
• Structures de type table sans <table>
• Holy-Grail layouts avec colonnes latérales fixes

En pratique, on combine les deux : Grid pour le squelette extérieur, Flexbox pour les composants intérieurs. Le playground ne génère que du code Flexbox — un outil sœur dédié à Grid est dans le backlog.

Comment écrire Flexbox en utility-classes Tailwind ?

Tailwind a utilisé les mêmes noms de classes Flexbox depuis la v3.0 (décembre 2021) — les utilities grow, shrink et basis-… sont donc identiques en v3 et v4. Qui voit dans un ancien codebase flex-grow, flex-shrink-0 ou flex-basis-[120px] regarde des restes de Tailwind v2 ou une liste de classes à la main — ce n’était jamais officiel en v3.

Concept	Tailwind v3 / v4	CSS pur
Grandir	grow	flex-grow: 1
Grandir avec facteur	grow-[2]	flex-grow: 2
Ne pas rétrécir	shrink-0	flex-shrink: 0
Rétrécir avec facteur	shrink-[2]	flex-shrink: 2
Valeur de base	basis-[120px]	flex-basis: 120px
Base auto	basis-auto	flex-basis: auto

Le playground propose néanmoins les deux onglets (tailwind-v3 et tailwind-v4) pour que les audits de migration, les snippets d’IDE et les relecteurs de code puissent coller la sortie 1:1 dans les deux codebases. Sur le fond, les deux onglets émettent des noms de classes identiques — la différence entre v3 et v4 ne tient pas aux utilities Flexbox, mais à la configuration CSS-first (@theme), au moteur Lightning CSS et aux utilities de dégradé renommées (bg-linear-to-* à la place de bg-gradient-to-*).

Pourquoi rien ne se passe parfois quand on règle ?

Flexbox a quelques interactions silencieuses — on change une propriété et rien ne bouge. Causes fréquentes :

align-content sans wrap. align-content ordonne des lignes flex le long de l’axe secondaire. Mais des lignes n’existent que si flex-wrap: wrap ou wrap-reverse est actif. Avec nowrap, il y a exactement une ligne — align-content n’a rien à faire. Le playground le signale dans le panneau d’avertissements.

justify-self sur un item. Cette propriété existe en CSS Grid, mais PAS en Flexbox. Pour déplacer un seul item le long de l’axe principal, on utilise margin-left: auto sur l’item — l’astuce pousse l’item et tous ses suivants vers la droite (en flex-direction: row). C’est ainsi qu’on obtient le classique « logo à gauche, menu à droite ».

flex-basis sans flex-grow. Si vous posez flex-basis: 0, tous les items sont théoriquement de zéro pixel — mais ne grandissent pas non plus, car flex-grow: 0 est la valeur par défaut. Les items s’écrasent à min-content. Correctif : ajouter flex-grow: 1, ou utiliser le raccourci flex: 1.

min-width: auto empêche de rétrécir. Les items ont par défaut min-width: auto — ils ne deviennent jamais plus petits que leur contenu minimal intrinsèque. Avec de longs textes ou de larges images, le contenu fait sauter le layout. Correctif : min-width: 0 sur l’item.

Quels cas d’usage couvrent les presets ?

Cinq mises en page du monde réel avec, chacune, une astuce d’apprentissage :

Barre de navigation. Conteneur en flex-direction: row avec gap: 16px. Le premier item (logo) reçoit flex-grow: 1 pour pousser tous les autres vers la droite. Astuce : à la place du justify-self inexistant, on utilise margin-left: auto sur le dernier élément avant le groupe menu.

Grille de cartes. flex-wrap: wrap plus gap: 16px permet aux cartes de passer à la ligne dès que la place manque. Les items en flex-basis: 200px et flex-grow: 1 remplissent chaque rangée également. Astuce : min-width: 0 sur les cartes à long contenu, sinon elles font sauter le layout.

Holy-Grail layout. Trois colonnes avec sidebar fixe à gauche, main fluide, sidebar fixe à droite. Les colonnes latérales reçoivent flex: 0 0 200px, main flex: 1 1 auto. Astuce : au passage à flex-direction: column pour mobile, les axes basculent — la sidebar devient haut/bas, plus gauche/droite.

Pied de page collant. Conteneur en flex-direction: column qui remplit au moins la hauteur du viewport. L’élément main reçoit flex-grow: 1, le footer se colle automatiquement en bas. Astuce : pas besoin de position: absolute — Flexbox le fait robustement, sans conflit de z-index.

Centré sur les deux axes. Le classique « hello world » de Flexbox. justify-content: center plus align-items: center sur le conteneur, c’est tout. Astuce : sur l’item centré, AUCUNE propriété supplémentaire n’est nécessaire — le conteneur fait tout.

Questions fréquentes

Comment fonctionne Flexbox en CSS ?

Flexbox est un modèle de mise en page unidimensionnel. Un élément parent avec display: flex devient un conteneur flex ; ses enfants directs deviennent des items flex disposés le long d’un axe principal. L’axe principal est défini par flex-direction, l’axe secondaire est perpendiculaire.

Quelle différence entre Flexbox et CSS Grid ?

Flexbox est unidimensionnel — les items se déplacent soit sur une rangée, soit sur une colonne. CSS Grid est bidimensionnel et définit lignes ET colonnes en même temps. Règle de pouce : les composants avec Flexbox, les mises en page de pages entières avec Grid.

Quand utiliser Flexbox plutôt que Grid ?

Dès que le contenu doit s’écouler le long d’un axe : barres de navigation, barres d’outils, cartes en rangée, listes verticales de sidebar, contenu intérieur de modal centré. Dès que vous voulez contrôler à la fois lignes ET colonnes, Grid est l’outil approprié.

Comment centrer des items verticalement et horizontalement avec Flexbox ?

Sur le conteneur, mettre display: flex; justify-content: center; align-items: center;. Cela fonctionne avec n’importe quel nombre d’items et sans hauteur explicite sur l’item lui-même. Attention : align-items nécessite une hauteur sur le conteneur, sinon il n’y a pas d’axe secondaire pour centrer.

Pourquoi align-content et flex-wrap fonctionnent-ils ensemble ?

align-content ordonne des lignes flex entières le long de l’axe secondaire — et il n’y a de lignes que s’il y a saut. Avec flex-wrap: nowrap, il n’existe qu’une ligne, donc align-content n’agit pas. Dès que flex-wrap: wrap est actif, la propriété contrôle l’espace entre les lignes.

Que signifient flex-grow, flex-shrink et flex-basis ?

flex-basis est la taille idéale avant que la place ne soit distribuée ou retirée. flex-grow définit l’agressivité avec laquelle un item revendique la place restante (0 = pas du tout, 1 = se partage le reste, 2 = deux fois plus que 1). flex-shrink fait l’inverse quand la place vient à manquer. Le raccourci flex: 1 1 0 règle les trois.

En quoi les classes Flexbox de Tailwind v4 diffèrent-elles de v3 ?

Tailwind v4 a supprimé le préfixe flex- sur les utilities d’item : grow, shrink-0, basis-[120px] remplacent flex-grow, flex-shrink-0, flex-basis-[120px]. Les utilities de conteneur (flex, flex-col, justify-center, items-center) restent identiques. Le playground produit les deux variantes en parallèle.

L’outil enregistre-t-il mes mises en page ?

Non. Tous les réglages restent dans l’onglet du navigateur — pas de serveur, pas de compte, pas de cookies. Au rechargement, le playground redémarre avec les valeurs par défaut. Pour sauvegarder une mise en page, copiez la sortie de code dans votre propre feuille de style.

Quels outils CSS sont liés ?

Autres outils pour le CSS authoring visuel :

• Générateur de dégradés CSS — dégradés linéaires, radiaux et coniques avec OKLCH et sortie Tailwind v4.
• Générateur de box-shadow — ombres multi-couches avec presets Material 3 Elevation.
• Formateur CSS — formater proprement du CSS brut ou minifié.
• Vérificateur de contraste — vérifier le contraste WCAG-AAA entre deux couleurs.