CSS Flexbox Generator

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

Mises en Page
Conteneur
display flex
flex-direction row
flex-wrap nowrap
justify-content flex-start
align-items stretch
align-content stretch

Nécessite flex-wrap: wrap

16px
Aperçu
3/8
Code 
flex
gap-4
Overrides
16px
Rayon de bordure
Élément

Cliquez sur un élément dans l'aperçu pour modifier ses propriétés.

Générateur CSS Flexbox en Ligne — Builder Visuel avec Sortie Tailwind

Construisez des mises en page CSS Flexbox visuellement et copiez le code en quelques secondes. Ajustez flex-direction, justify-content, align-items, gap et flex-grow — l'aperçu en direct se met à jour instantanément. Sans configuration, sans inscription, sans installation.

Contrairement aux autres générateurs, cet outil affiche les classes Tailwind et le CSS vanilla simultanément. Basculez entre les onglets Tailwind, CSS et React/JSX et copiez le format utilisé par votre projet. Dix layouts prédéfinis (Navbar, Centered Hero, Card Grid, Sidebar, Holy Grail et plus) vous permettent de démarrer depuis un pattern réel plutôt que de zéro.

Comment Utiliser le Générateur CSS Flexbox

Construire un layout flexbox prend moins d'une minute :

  1. Choisissez un preset — cliquez sur un preset dans la galerie en haut (Navbar, Card Grid, Sidebar…) pour charger une configuration complète. L'aperçu et le code se mettent à jour immédiatement.
  2. Ajustez les propriétés du conteneur — utilisez les contrôles à gauche pour modifier flex-direction, flex-wrap, justify-content, align-items, align-content et gap. L'aperçu reflète chaque changement en temps réel.
  3. Affinez les éléments individuels — cliquez sur une boîte colorée dans l'aperçu (ou sur les onglets d'éléments) pour éditer flex-grow, flex-shrink, flex-basis, align-self et order de cet élément.
  4. Copiez le code — basculez entre les onglets Tailwind, CSS ou React dans le panneau de code et cliquez sur Copier ou appuyez sur Shift+Entrée. Utilisez le bouton de téléchargement pour sauvegarder le fichier CSS.

Si une propriété n'a aucun effet dans la configuration actuelle — par exemple, align-content quand flex-wrap est réglé sur nowrap — un avertissement contextuel explique exactement pourquoi et comment y remédier.

Exemples CSS Flexbox

Sorties réelles du générateur pour des patterns de mise en page courants :

Navbar (space-between, center)

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Tailwind : flex justify-between items-center gap-4

Hero centré (les deux axes)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Tailwind : flex justify-center items-center

Grille de cards avec retour à la ligne

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Tailwind : flex flex-wrap gap-4

Qu'est-ce que CSS Flexbox ?

CSS Flexible Box Layout (Flexbox) est un modèle de mise en page unidimensionnel — il organise les éléments sur une seule ligne ou colonne. Contrairement aux anciennes méthodes, Flexbox donne un contrôle précis sur la façon dont les éléments grandissent, rétrécissent et s'alignent, même quand leurs tailles sont inconnues ou dynamiques.

Flexbox fonctionne sur deux axes : l'axe principal (défini par flex-direction) et l'axe transversal (perpendiculaire au principal). justify-content contrôle l'alignement sur l'axe principal ; align-items sur l'axe transversal. Cette distinction est la source de confusion la plus fréquente chez les développeurs, et c'est pourquoi les avertissements contextuels sont si précieux en pratique.

Cas d'Usage Courants

  • Barres de navigation : flex, justify-content: space-between, align-items: center — le pattern classique pour un logo à gauche et des liens à droite.
  • Centrer un élément : display: flex; justify-content: center; align-items: center sur le conteneur parent avec une hauteur définie. La façon la plus rapide de centrer un div.
  • Rangées de cards : flex, flex-wrap: wrap, gap — les cards s'alignent en rang et passent à la ligne suivante quand le viewport est trop étroit.
  • Sidebar + contenu : flex, flex-wrap: nowrap, align-items: stretch — un élément étroit fixe et un autre qui grandit pour remplir l'espace restant (flex-grow: 1).
  • Champs de formulaire en ligne : flex, align-items: center, gap — label et input sur la même ligne avec un alignement vertical cohérent.
  • Groupes de boutons : flex, flex-wrap: wrap, justify-content: flex-end, gap — les boutons passent à la ligne suivante sur les petits écrans.

Flexbox vs. CSS Grid : Quand Utiliser Chacun ?

Utilisez Flexbox pour les mises en page unidimensionnelles — une rangée de boutons, une navbar, l'alignement à l'intérieur d'un composant. Utilisez Grid pour les mises en page bidimensionnelles — quand vous devez contrôler les lignes ET les colonnes simultanément, comme la structure complète d'une page.

La plupart des designs modernes utilisent Grid pour le macro-layout de la page et Flexbox à l'intérieur de chaque composant ou section.

Questions Fréquentes

Quelle est la différence entre justify-content et align-items en Flexbox ?

justify-content contrôle l'alignement sur l'axe principal — horizontal quand flex-direction est row, vertical quand il est column. align-items contrôle l'axe transversal (la direction perpendiculaire). Pour centrer un élément sur les deux axes, définissez display: flex; justify-content: center; align-items: center sur le conteneur parent avec une hauteur définie.

Pourquoi align-content ne fonctionne-t-il pas dans ma mise en page Flexbox ?

align-content n'a d'effet que lorsque deux conditions sont remplies : (1) flex-wrap est réglé sur wrap ou wrap-reverse, et (2) les éléments ont réellement passé à plusieurs lignes. Sur un conteneur à une seule ligne — le flex-wrap: nowrap par défaut — align-content n'a aucun effet visuel. Utilisez align-items pour les conteneurs à une seule ligne. Le générateur affiche un avertissement lorsque align-content est défini avec nowrap actif.

Que signifie flex: 1 en CSS ?

flex: 1 est un raccourci pour flex: 1 1 0% — l'élément peut grandir (flex-grow: 1), peut rétrécir (flex-shrink: 1), et commence avec une taille de base zéro (flex-basis: 0%). Quand plusieurs éléments ont flex: 1, ils partagent l'espace disponible de manière égale — le pattern le plus courant pour des colonnes de largeur égale.

Comment centrer un div verticalement et horizontalement avec Flexbox ?

Appliquez sur le conteneur parent : display: flex; justify-content: center; align-items: center. Le conteneur doit avoir une hauteur définie — une valeur fixe, height: 100vh, ou hériter la hauteur de son propre parent. Sans hauteur définie, le centrage vertical n'a pas d'espace pour fonctionner.

Le générateur exporte-t-il des classes Tailwind CSS ?

Oui — et il affiche Tailwind et CSS vanilla simultanément. Basculez entre les onglets Tailwind, CSS et React dans le panneau de code. La sortie Tailwind utilise des classes utilitaires standard (flex, justify-between, items-center, gap-4, etc.). Pour les valeurs de gap hors de l'échelle par défaut de Tailwind, le générateur utilise la syntaxe de valeur arbitraire : gap-[20px].

Ressources

Outils connexes