Générateur CSS Flexbox
Générateur CSS Flexbox gratuit : aperçu live, CSS et Tailwind simultanément, 10 layouts prédéfinis, avertissements contextuels et export React/JSX. Sans inscription.
Mis à jour juin 2026
Vérifié par Rafael Duarte
Nécessite flex-wrap: wrap
flex
gap-4Cliquez sur un élément dans l'aperçu pour modifier ses propriétés.
Comment utiliser le générateur flexbox CSS
D'un preset à du code prêt à l'emploi en moins d'une minute
1. Choisissez un preset
Navbar, grille de cartes, barre latérale, Holy Grail — l'aperçu et le code se mettent à jour instantanément.
2. Ajustez le conteneur et les éléments
flex-direction, justify-content, align-items — ou cliquez sur un élément pour modifier grow/shrink/order.
3. Copiez le code
Basculez entre Tailwind, CSS ou React et copiez, ou téléchargez le fichier CSS.
Ce que fait cet outil
Double sortie, des avertissements qui expliquent pourquoi
Tailwind et CSS simultanés
Visualisez les deux sorties en même temps, plus un onglet React/JSX.
10 presets prêts à l'emploi
Navbar, Hero centré, grille de cartes, barre latérale, Holy Grail et plus — partez d'un modèle réel.
Avertissements contextuels
Quand une propriété n'a aucun effet dans la configuration actuelle, l'outil en explique la raison.
Édition par élément
Cliquez sur n'importe quelle boîte de l'aperçu pour modifier flex-grow, shrink, basis, align-self et order.
Aperçu responsive (mobile/tablette/desktop)
Basculez la largeur d'aperçu entre mobile (375px), tablette (768px) et desktop pour voir comment le layout se comporte avant de copier le code.
Preset App Shell avec code multi-éléments
Le preset App Shell génère des blocs de CSS/Tailwind/React séparés pour la navbar, la barre latérale et le contenu — prêts à coller dans un layout d'application complet.
Exemples
Quand vous allez utiliser cet outil
Les scénarios les plus courants chez les utilisateurs
Barres de navigation
flex + justify-content:space-between + align-items:center — logo à gauche, liens à droite.
Centrer un élément
La façon la plus rapide de centrer une div sur les deux axes.
Lignes de cartes
flex-wrap:wrap + gap — les cartes passent à la ligne suivante quand la fenêtre rétrécit.
Barre latérale + contenu
Un élément étroit fixe et un autre qui grandit avec flex-grow:1 pour remplir le reste.
Champs de formulaire en ligne
flex + align-items:center + gap — label et champ alignés sur la même ligne, avec un espacement cohérent.
Groupes de boutons
flex-wrap:wrap + justify-content:flex-end + gap — les boutons passent à la ligne suivante sur petit écran sans déborder du layout.
Erreurs courantes
Confondre justify-content et align-items
justify-content contrôle l'axe principal ; align-items contrôle l'axe transversal (perpendiculaire).
align-content sans flex-wrap:wrap
N'a d'effet que lorsque les éléments ont réellement passé à la ligne suivante — l'outil vous prévient quand c'est le cas.
Croire que order change l'ordre du DOM
order ne modifie que l'ordre visuel — l'ordre de tabulation suit le DOM, ce qui a un impact sur l'accessibilité.
Les éléments ne rétrécissent pas sous leur contenu
Par défaut, min-width vaut auto — un élément ne rétrécit pas en dessous de son propre contenu même avec flex-shrink, ce qui provoque un débordement. Définissez min-width:0 sur l'élément pour autoriser un vrai rétrécissement.
Oublier que align-items:stretch est la valeur par défaut
Sans définir align-items, les éléments s'étirent pour remplir la hauteur du conteneur sur l'axe transversal — ce qui surprend quand on attendait une hauteur automatique. Définissez align-items:flex-start si ce n'est pas le comportement voulu.
Conteneur sans hauteur pour centrer verticalement
justify-content:center et align-items:center ne centrent vraiment que si le conteneur a une hauteur définie (fixe, 100vh ou héritée du parent) — sans hauteur, il n'y a pas d'espace supplémentaire pour centrer.
Pourquoi utiliser cet outil
Affiche simultanément les classes Tailwind et le CSS natif — la plupart des générateurs ne proposent qu'un seul format de sortie.
Les avertissements contextuels expliquent exactement pourquoi une propriété ne fonctionne pas, évitant le processus d'essai-erreur que la plupart des développeurs rencontrent avec align-content et flex-wrap.
En plus du CSS et de Tailwind, l'outil simule le layout à différentes largeurs d'écran (mobile, tablette, desktop) et permet de modifier individuellement jusqu'à 8 éléments — grow, shrink, basis, align-self et order — directement dans l'aperçu, sans avoir à tester sur votre propre projet.
Flexbox vs. CSS Grid
Quand utiliser chacun
Questions fréquentes
justify-content contrôle l'axe principal (horizontal en row, vertical en column). align-items contrôle l'axe transversal. Pour centrer sur les deux axes, définissez les deux sur center.
Ressources
Référence complète de la spécification avec données de compatibilité.
Le guide visuel le plus consulté pour toutes les propriétés de Flexbox.
La spécification officielle du W3C qui définit le comportement de toutes les propriétés de Flexbox.
Outils connexes
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
