Générateur Flexbox CSS
Construisez des mises en page Flexbox visuellement : direction, retour à la ligne, justify-content, align-items, gap et croissance par élément. Préréglages pour en-têtes, barres latérales et grilles de cartes. CSS, SCSS, Tailwind.
Chargement de Générateur Flexbox CSS…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur Flexbox CSS
- 1
Ouvrez Générateur Flexbox CSS sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Flexbox est le système de mise en page CSS qui aligne des éléments en ligne ou en colonne : barres de navigation, groupes de boutons, cartes, contenu centré. Ses propriétés sont puissantes mais faciles à confondre. Ce générateur Flexbox vous permet de les modifier avec des boutons et de voir le résultat sur des blocs en direct, puis de copier le code.
Comment construire une mise en page flex
- Partez d'un préréglage : horizontal, vertical, centré, space between, space around, space evenly, grille, en-tête, barre latérale ou grille de cartes.
- Réglez le conteneur : flex-direction, flex-wrap, justify-content, align-items, align-content et gap.
- Ajoutez ou retirez des éléments et réglez le flex-grow et la taille de chacun.
- Copiez le CSS, le SCSS ou les classes Tailwind.
Aide-mémoire Flexbox
| Propriété | Rôle |
|---|---|
| flex-direction | Axe principal : row (horizontal) ou column (vertical) |
| justify-content | Espacement sur l'axe principal : start, center, end, between, around, evenly |
| align-items | Alignement sur l'axe secondaire : stretch, start, center, end, baseline |
| flex-wrap | Passage des éléments à la ligne quand la place manque |
| gap | Espace entre les éléments |
| flex-grow | Part de l'espace libre qu'un élément occupe |
Recettes courantes
- Tout centrer : display: flex; justify-content: center; align-items: center.
- Logo à gauche, menu à droite : justify-content: space-between sur l'en-tête.
- Mise en page avec barre latérale : une barre latérale de largeur fixe et une zone principale avec flex-grow: 1.
- Cartes qui passent à la ligne : flex-wrap: wrap avec un gap et une largeur minimale de carte.
Flexbox ou grid ?
Utilisez Flexbox pour une seule direction à la fois, comme une rangée de boutons ou une colonne de champs. Utilisez CSS grid pour les mises en page en deux dimensions dont les lignes et les colonnes doivent s'aligner. Beaucoup de pages combinent les deux. Pour les grilles de page, voyez le générateur de grille ; pour styliser les blocs, les générateurs de border-radius et de box-shadow.
Questions fréquentes
Comment centrer une div avec Flexbox ?
Sur le parent, mettez display: flex, justify-content: center et align-items: center. Donnez une hauteur au parent si vous voulez centrer verticalement dans une grande zone.
Quelle est la différence entre justify-content et align-items ?
justify-content répartit les éléments sur l'axe principal (horizontal en ligne), align-items les aligne sur l'axe perpendiculaire (vertical en ligne).
Quand utiliser Flexbox plutôt que grid ?
Flexbox pour les mises en page dans une seule direction, comme les barres de navigation et les groupes de boutons ; grid pour les mises en page en deux dimensions avec lignes et colonnes.
Puis-je obtenir des classes Tailwind ?
Oui. Choisissez l'export Tailwind pour obtenir des classes utilitaires comme flex, justify-between et gap-4.
Comment faire passer les éléments à la ligne ?
Mettez flex-wrap: wrap sur le conteneur. Les éléments passent alors à la ligne quand la place manque.
À quoi sert flex-grow ?
Il permet à un élément d'occuper l'espace libre restant. Un élément avec flex-grow: 1 s'agrandit, tandis que ceux à 0 gardent leur taille.