Générateur de CSS Flexbox

Outil gratuit pour expérimenter des mises en page Flexbox en ajustant flex-direction, justify-content, align-items, flex-wrap et gap avec un aperçu en temps réel. Copiez le code CSS généré en un clic.

Dernière mise à jour : 2026-09-20

Bâtir une disposition Flexbox à la main

Flexbox est la méthode de disposition qui range les éléments le long d'un seul axe. Cet outil vous laisse changer `flex-direction`, `justify-content`, `align-items`, `flex-wrap` et `gap` à l'écran, voir le résultat à mesure, et recopier tel quel le CSS obtenu.

**Presque toute difficulté avec Flexbox se ramène à savoir dans quel sens agissent `justify-content` et `align-items`.** Le premier régit le placement le long de l'**axe principal**, le second le long de l'**axe transversal**. Ce qui complique les choses, c'est qu'**au moment où vous faites passer `flex-direction` de `row` à `column`, ces deux axes permutent.** Le `justify-content` qui s'occupait de l'horizontale tant que les éléments se tenaient côte à côte s'occupe de la verticale dès qu'ils sont empilés. La plupart des plaintes selon lesquelles quelque chose « ne se centre pas » reviennent à **n'avoir pas remarqué que la propriété à modifier a permuté.**

Comment s'en servir

Partez d'un préréglage Les dispositions courantes — centrer, écarter, empiler — sont à portée de main.
Changez flex-direction **Passer de `row` à `column` rend la permutation des axes visible.**
Essayez les propriétés d'alignement Modifiez tour à tour `justify-content` et `align-items` et confirmez le comportement de chacune.
Recopiez le CSS produit Dès que la disposition vous convient, elle se colle telle quelle dans votre code.

Astuces pour en tirer le meilleur parti

justify-content aligne les éléments selon "l'axe principal", tandis qu'align-items les aligne selon "l'axe secondaire". En passant flex-direction à column, l'axe principal devient vertical, ce qui inverse l'effet visuel de ces deux propriétés.
Le préréglage "Centré" combine justify-content: center et align-items: center, la méthode la plus courante pour centrer un élément à la fois horizontalement et verticalement avec Flexbox.
La propriété gap n'ajoute de l'espace qu'entre les éléments, pas autour du conteneur ; contrairement à margin, elle crée donc un espacement uniforme entre éléments voisins sans affecter les bords.
Définir align-self sur un seul élément remplace l'align-items du conteneur uniquement pour cet élément, ce qui est utile pour mettre en valeur un élément avec un alignement différent des autres.
Activer flex-wrap: wrap permet aux éléments qui ne tiennent plus dans la largeur du conteneur (ou la hauteur, en mode colonne) de passer automatiquement à la ligne suivante, une technique courante pour les mises en page de cartes responsives.

Dans quels cas s'en servir

Pour monter une barre de navigation

**Le logo à gauche et le menu à droite est le cas classique de `justify-content: space-between`.**

Pour espacer des cartes régulièrement

`gap` vous épargne l'artifice consistant à annuler des `margin` pour obtenir un espacement régulier.

Pour centrer un élément dans les deux sens

**Mettre `justify-content` et `align-items` tous deux à `center` est le chemin le plus court.**

Pour apprendre Flexbox

Changer une valeur et regarder le résultat l'enseigne plus vite que n'importe quelle lecture.

Vocabulaire de Flexbox

Axe principal: La direction le long de laquelle les éléments se rangent, fixée par `flex-direction`. **Elle court à l'horizontale avec `row` et à la verticale avec `column`.**
Axe transversal: La direction perpendiculaire à l'axe principal. **Quand le principal permute, celui-ci permute avec lui.**
Justify-content: Régit le placement **le long de l'axe principal** : centrage, écartement, répartition régulière et le reste.
Align-items: Régit le placement **le long de l'axe transversal**. Sous le `stretch` par défaut, les enfants s'étendent sur toute la hauteur.
Flex-wrap: Décide si les éléments qui ne tiennent pas passent à une nouvelle ligne. Laissés à `nowrap`, ils sont comprimés sur place.
Gap: L'espace laissé entre les éléments. **À la différence de `margin`, il n'ajoute aucun espace superflu aux bords extérieurs.**

Questions fréquentes

justify-content contrôle l'alignement le long de "l'axe principal" de Flexbox (la direction définie par flex-direction, horizontale par défaut), tandis qu'align-items contrôle l'alignement le long de "l'axe secondaire" perpendiculaire. Avec flex-direction: row, l'axe principal est horizontal, donc justify-content gère le positionnement horizontal et align-items le vertical ; mais en passant à flex-direction: column, l'axe principal devient vertical, et ces deux propriétés échangent leurs rôles.

Quand flex-direction vaut column, l'axe principal devient vertical, donc justify-content: center centre les éléments verticalement. Pour les centrer aussi horizontalement (l'axe secondaire), utilisez align-items: center. En combinant les deux, vous pouvez centrer le contenu dans les deux directions même dans une mise en page en colonne empilée.

La prise en charge de gap dans Flexbox a mis du temps à arriver sur Chrome et Safari, jusque vers 2021, mais elle est désormais supportée par tous les navigateurs principaux (Chrome 84+, Safari 14.1+, Firefox 63+). Si vous devez prendre en charge des navigateurs très anciens, envisagez margin comme solution de repli.

flex-grow détermine dans quelle mesure un élément s'étend pour occuper l'espace restant lorsque le conteneur a de la place en trop, tandis que flex-shrink détermine dans quelle mesure un élément rétrécit lorsque le conteneur est trop étroit pour contenir tous les éléments à leur taille d'origine. Les deux propriétés répartissent le surplus ou le déficit d'espace par rapport à la taille de base de l'élément (flex-basis).

Flexbox convient généralement mieux pour disposer des éléments selon une seule direction (une ligne ou une colonne), comme une barre de navigation ou une rangée de cartes. CSS Grid, en revanche, est conçu pour contrôler simultanément lignes et colonnes dans une mise en page véritablement bidimensionnelle, comme la grille d'une page entière. En règle générale, privilégiez Flexbox pour des dispositions linéaires simples et Grid pour des structures plus complexes en forme de grille.

Anecdote — Comment Flexbox a changé l'histoire de la mise en page CSS

Avant l'arrivée de CSS Flexbox (officiellement CSS Flexible Box Layout Module), les mises en page horizontales sur le web étaient généralement construites avec la propriété float. Or float avait été conçue à l'origine pour faire en sorte que le texte s'enroule autour d'une image, pas pour créer des mises en page ; son utilisation à cette fin nécessitait donc de nombreux contournements, le plus célèbre étant l'astuce "clearfix" pour empêcher la hauteur d'un élément parent de s'effondrer.

Flexbox, dont le premier brouillon a été publié par le W3C en 2009, a été conçu spécifiquement pour les mises en page unidimensionnelles. Des tâches qui nécessitaient auparavant plusieurs lignes d'astuces CSS avec float — étirer des éléments le long de l'axe principal, répartir l'espace uniformément ou centrer du contenu verticalement — pouvaient désormais s'exprimer avec une seule propriété déclarative comme justify-content ou align-items.

Lorsque les principaux navigateurs ont achevé leur implémentation de Flexbox vers 2015, celui-ci est rapidement devenu le moyen standard de réaliser des motifs courants du design web, tels que les barres de navigation, les mises en page en cartes et l'alignement des formulaires. À l'époque, la communauté des développeurs front-end a particulièrement salué le fait que le centrage vertical, longtemps considéré comme l'un des problèmes les plus épineux du CSS, ait enfin trouvé une solution simple.

Aujourd'hui, Flexbox coexiste avec CSS Grid, spécialisé dans les mises en page bidimensionnelles, chacun jouant un rôle différent : Flexbox pour disposer des composants selon une seule direction, et Grid pour structurer la page entière comme une grille.

Voir toutes les anecdotes