Générateur Flexbox
Réglez un conteneur Flexbox en direct et copiez le CSS prêt à l’emploi.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Maîtrisez Flexbox sans tâtonner
Choisissez la direction, l’alignement, le retour à la ligne et l’espacement : l’aperçu se met à jour en direct et le CSS du conteneur est prêt à copier.
-
Réglez les propriétés
direction, justify, align, wrap, gap.
-
Observez l’aperçu
Des éléments numérotés réagissent en direct.
-
Copiez le CSS
À appliquer sur votre conteneur.
Le CSS du conteneur
| Propriété | Rôle |
|---|---|
| display: flex | Active Flexbox |
| flex-direction | Ligne ou colonne |
| justify-content | Répartition (axe principal) |
| align-items | Alignement (axe secondaire) |
| gap | Espace entre les éléments |
Le CSS s’applique au parent ; les enfants se placent seuls. Tout est généré dans votre navigateur.
Questions fréquentes
À quoi sert Flexbox ?
Flexbox est un mode de disposition CSS pour aligner et répartir des éléments sur une ligne ou une colonne. Il gère automatiquement l’espacement, le centrage et le passage à la ligne, ce qui simplifie énormément les mises en page responsives.
Quelle différence entre justify-content et align-items ?
justify-content distribue les éléments le long de l’axe principal (horizontal en row), align-items les aligne sur l’axe secondaire (vertical en row). Si vous passez en column, les deux axes s’inversent.
Le CSS généré s’applique-t-il au conteneur ou aux éléments ?
Au conteneur. Les propriétés (display: flex, justify-content, etc.) se mettent sur le parent ; les enfants se positionnent automatiquement. L’aperçu montre des éléments numérotés pour visualiser l’effet.
Que fait flex-wrap ?
Par défaut (nowrap), les éléments restent sur une seule ligne quitte à rétrécir. Avec wrap, ils passent à la ligne suivante quand l’espace manque — utile pour des grilles fluides.