Bac à sable Flexbox CSS
NouveauAjustez les propriétés flex avec un aperçu en direct et copiez le CSS.
Container properties
Selected item
Click an item in the preview to edit its flex-grow, flex-shrink, flex-basis, order and align-self — or turn it into a nested flex container.
Runs entirely in your browser. Nothing is uploaded.
Un générateur visuel de flexbox qui écrit le CSS à votre place
Ce générateur flexbox transforme le CSS Flexible Box Layout en quelque chose que vous pouvez voir. Au lieu de deviner ce que justify-content ou align-items vont faire, vous activez chaque propriété sur un contrôle étiqueté et regardez un aperçu en direct se réorganiser instantanément — puis vous copiez un code propre, prêt pour la production. Il s'exécute entièrement dans votre navigateur, sans inscription et sans rien à téléverser.
C'est un vrai playground flexbox : un vrai conteneur flex avec des éléments enfants modifiables, des contrôles complets du conteneur et par élément, des conteneurs imbriqués, un aperçu responsive redimensionnable et une URL partageable. Que vous appreniez flexbox ou que vous construisiez rapidement une barre de navigation, une rangée de cartes ou un héros centré, vous obtenez le layout exact — et le CSS, Tailwind ou Bootstrap correspondant — en quelques secondes.
Chaque propriété du conteneur, avec un aperçu en direct
Contrôlez le conteneur comme le fait la spécification. Définissez flex-direction (row, row-reverse, column, column-reverse) pour choisir l'axe principal, justify-content pour espacer les éléments le long de celui-ci, et align-items pour les aligner sur l'axe transversal. Activez flex-wrap pour que les éléments s'enchaînent sur de nouvelles lignes, utilisez align-content pour espacer ces lignes enveloppées, et réglez des valeurs indépendantes de gap de ligne et de colonne.
Une légende d'axes intégrée indique quelle direction est l'axe principal et lequel est l'axe transversal lorsque vous changez flex-direction, de sorte que la relation entre justify-content et align-items devient enfin claire. C'est un aide-mémoire flexbox pratique que vous apprenez en faisant.
Contrôle par élément : grow, shrink, basis, order et align-self
La plupart des générateurs s'arrêtent au conteneur. Celui-ci vous permet de cliquer sur n'importe quel élément dans l'aperçu et de le modifier individuellement : définissez flex-grow, flex-shrink et flex-basis (le raccourci flex), remplacez son align-self et changez son order pour le repositionner sans toucher au HTML. Ajoutez ou supprimez des éléments pour tester comment l'espace se redistribue.
Cela rend simple la construction de vrais modèles — une barre latérale fixe à côté d'une colonne principale flexible (flex: 0 0 240px à côté de flex: 1), un seul élément centré, ou un lien de pied de page poussé à l'extrémité avec margin-left: auto.
Flexbox imbriqué et aperçu responsive
Les vrais layouts s'imbriquent. N'importe quel élément peut devenir son propre conteneur flex imbriqué avec sa propre direction, justify et align — exactement ce dont un générateur de flexbox imbriqué a besoin pour des cartes qui ont une ligne d'en-tête au-dessus d'un corps, ou une barre d'outils à l'intérieur d'une barre d'outils. Le code généré inclut également les règles imbriquées.
Parce que flexbox concerne le comportement responsive, l'aperçu est redimensionnable : faites glisser la poignée ou choisissez un préréglage de largeur Mobile / Tablette / Bureau et regardez les éléments s'enrouler et se réaligner à chaque taille. C'est le moyen le plus rapide de confirmer qu'un layout flexbox responsive se comporte correctement avant de le déployer.
Copiez en CSS, Tailwind ou Bootstrap — et comparaison avec d'autres outils
Changez l'onglet de sortie pour obtenir le format qu'utilise votre projet. CSS vous donne des règles propres .container et par élément en utilisant le raccourci flex. Tailwind écrit les classes utilitaires — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — sur un extrait HTML prêt à coller. Bootstrap génère les classes utilitaires équivalentes d-flex. Seules les propriétés que vous avez réellement modifiées sont émises, donc la sortie reste minimale et lisible.
D'autres générateurs visuels comme Flexbox.help omettent les contrôles par élément et les conteneurs imbriqués. Le playground en ligne de Tailwind ne génère pas de CSS vanilla. Cet outil prend en charge les trois formats de sortie, gère l'imbrication et fonctionne hors ligne une fois chargé — sans compte, sans coût, sans données quittant votre navigateur.
Frequently asked questions
Qu'est-ce que Flexbox en CSS et pourquoi l'utilise-t-on ?
Flexbox (le CSS Flexible Box Layout) est un modèle de disposition unidimensionnel pour organiser des éléments sur une seule ligne ou colonne et distribuer l'espace entre eux. On l'active avec une seule ligne — display: flex — sur l'élément parent, et ses enfants deviennent des éléments flex qu'on peut aligner, espacer et redimensionner sans floats ni marges manuelles. Il est utilisé parce qu'il simplifie les tâches courantes : centrer, colonnes de même hauteur, barres de navigation, rangées de cartes.
Comment utiliser flexbox ?
Ajoutez display: flex à l'élément conteneur, puis contrôlez les enfants avec les propriétés du conteneur — flex-direction (row ou column), justify-content (espacement le long de l'axe principal), align-items (alignement sur l'axe transversal), flex-wrap et gap. Par exemple, .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; } dispose un logo et des liens en ligne, centrés verticalement.
Comment centrer une div avec flexbox ?
Rendez le parent un conteneur flex et centrez sur les deux axes : .parent { display: flex; justify-content: center; align-items: center; } — cela place l'enfant exactement au milieu horizontalement et verticalement. Donnez au parent une hauteur (par exemple min-height: 100vh pour un centrage plein écran). C'est la façon la plus propre de centrer parfaitement un élément.
Quelle est la différence entre justify-content et align-items ?
justify-content positionne les éléments le long de l'axe principal, tandis qu'align-items les positionne sur l'axe transversal. Avec le flex-direction: row par défaut, justify-content espace les éléments horizontalement et align-items les aligne verticalement. Passez à flex-direction: column et les deux s'inversent. La légende des axes en direct dans l'outil montre lequel est lequel en changeant la direction.
Qu'est-ce que flex-grow, flex-shrink et flex-basis ?
Ce sont les trois propriétés par élément qui décident comment un élément flex se dimensionne, généralement écrites ensemble comme le raccourci flex. flex-basis est la taille initiale avant de partager l'espace libre. flex-grow indique avec quelle avidité un élément s'étend pour remplir l'espace restant (0 = ne pas grandir, 1 = prendre une part). flex-shrink indique avec quelle facilité il rétrécit quand l'espace est limité.
Comment faire envelopper les éléments flex ?
Définissez flex-wrap: wrap sur le conteneur pour que les éléments qui ne tiennent pas passent sur une nouvelle ligne au lieu de déborder. Par défaut flex-wrap est nowrap. Avec l'enveloppement activé, donnez aux éléments un flex-basis (comme flex: 1 1 200px) pour que chaque ligne se remplisse bien, et utilisez align-content pour espacer les lignes résultantes.
Ce générateur flexbox est-il gratuit et privé ?
Gratuit sans inscription requise. Tout le playground fonctionne dans votre navigateur — votre layout, le CSS généré et le lien de partage sont tous construits sur votre appareil et ne sont jamais téléversés vers un serveur. Vous pouvez le mettre en favori et l'utiliser hors ligne une fois la page chargée. Aucun compte à créer et aucune limite sur les layouts que vous configurez.
Related tools
Voir tous les outils
Nouveau Mélangeur de couleurs
Mélangez deux couleurs à n’importe quel ratio et copiez le résultat ou n’importe quelle étape.
Nouveau Pipette à couleurs d’image
Choisissez n’importe quelle couleur d’une image et extrayez sa palette dominante en HEX, RGB et HSL.
Nouveau Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Nouveau Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Sélecteur et convertisseur de couleur
Choisissez une couleur et convertissez-la entre HEX, RGB, HSL et OKLCH.
Nouveau Vérificateur de contraste de couleur
Vérifiez les rapports de contraste WCAG AA/AAA entre les couleurs de texte et d’arrière-plan.