Comment utiliser : Générateur Flexbox CSS
- Choisissez un préréglage (centrage, barre de navigation, cartes qui se replient, barre latérale, pile) ou partez de zéro.
- Réglez le conteneur : flex-direction, flex-wrap, justify-content (axe principal), align-items (axe transversal) et gap.
- Cliquez sur un élément pour régler son flex-grow, shrink, basis, order et align-self ; utilisez + Add item ou Remove pour modifier le nombre d'éléments.
- Redimensionnez le conteneur pour le tester, puis copiez le CSS, le HTML ou les classes Tailwind.
Les deux axes de flexbox
Flexbox dispose les éléments le long d'un axe principal (défini par flex-direction) et d'un axe transversal perpendiculaire. justify-content répartit les éléments sur l'axe principal ; align-items les aligne sur l'axe transversal. Passez en column et les deux échangent leur rôle, ce qui explique pourquoi « centrer verticalement » demande parfois justify-content et parfois align-items.
flex : grow shrink basis
| Raccourci | Équivaut à | Utilisation |
|---|---|---|
flex: 1 | 1 1 0% | Colonnes de même largeur qui se partagent l'espace |
flex: auto | 1 1 auto | Croître à partir de la taille propre du contenu |
flex: none | 0 0 auto | Éléments fixes, comme un logo ou une icône |
flex: 1 1 240px | Démarrer à 240px, puis grandir ou rétrécir | Grilles de cartes qui se replient |
margin-left: auto sur un élément le pousse, ainsi que tout ce qui suit, jusqu'à l'extrémité opposée : c'est la méthode classique pour aligner à droite un bouton « Se connecter » dans une barre de navigation. Pour les mises en page à deux dimensions, avec lignes et colonnes, le Générateur CSS Grid est plus adapté.
Aussi recherché comme : générateur flexbox, générateur css flexbox, playground flexbox, justify-content générateur, align-items css, mise en page flex css, générateur flex tailwind, exemples css flex.
Outils complémentaires : Générateur Flexbox CSS
- Générateur border-radius — Arrondissez les coins de n'importe quel élément : utilisez un seul curseur pour tous les coins, ou réglez chaque coin séparément.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Convertisseur CSS vers Tailwind — Collez des règles ou déclarations CSS et obtenez les classes utilitaires Tailwind équivalentes pour chaque sélecteur, y compris les états hover: et les valeurs arbitraires comme p-[13px].
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
Questions fréquentes
Comment centrer une div avec flexbox ?
Sur le parent : display: flex; justify-content: center; align-items: center; et une hauteur définie. Choisissez le préréglage « Centrer un élément » pour le voir en action.
Quelle est la différence entre justify-content et align-items ?
justify-content positionne les éléments sur l'axe principal (horizontal dans une ligne), align-items sur l'axe transversal (vertical dans une ligne). Avec flex-direction: column, les deux échangent leur rôle.
Pourquoi mes éléments flex ne passent-ils pas à la ligne ?
flex-wrap vaut nowrap par défaut, donc les éléments rétrécissent pour tenir sur une seule ligne. Définissez flex-wrap: wrap et donnez aux éléments une flex-basis ou une min-width pour qu'ils aient une taille à partir de laquelle se replier.
Flexbox ou grid ?
Flexbox pour une seule direction à la fois : barres de navigation, barres d'outils, centrage, lignes de cartes. Grid lorsque vous avez besoin de lignes et de colonnes alignées, comme pour les mises en page de pages et les tableaux de bord.
Puis-je installer Générateur Flexbox CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur Flexbox CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.