Générateur Flexbox

Constructeur Visuel de Flexbox avec Aperçu et Export de Code

Un générateur CSS Flexbox interactif et outil d'apprentissage. Visualisez comment les propriétés flexbox fonctionnent en temps réel. Ajustez propriétés du conteneur et des items avec aperçu instantané. Exportez code CSS avec le flex shorthand canonique plus un bloc de balisage HTML correspondant, pour coller un extrait complet de conteneur et items directement dans votre projet.

Qu'est-ce que CSS Flexbox ?

CSS Flexbox (Flexible Box Layout) est une méthode de layout unidimensionnelle pour arranger des items en lignes ou colonnes. Elle rend les layouts complexes simples et responsifs.

Concepts clés :

Flex Container :
- Élément parent avec display: flex
- Contrôle l'arrangement des items enfants
- Propriétés : flex-direction, flex-wrap, justify-content, align-items, gap

Flex Items :
- Enfants directs du flex container
- Peuvent grandir, rétrécir et s'aligner indépendamment
- Propriétés : flex-grow, flex-shrink, flex-basis, align-self, order

Avantages :
- Centrage vertical facile
- Colonnes de hauteur égale
- Espacement flexible
- Responsif sans media queries
- Réordonner items visuellement

Comment fonctionne flex-direction ?

flex-direction définit l'axe principal et le flux des items :

Valeurs :
- row (défaut) : Gauche vers droite →
- row-reverse : Droite vers gauche ←
- column : Haut vers bas ↓
- column-reverse : Bas vers haut ↑

Axe Principal vs Axe Croisé :
- row : axe principal = horizontal, croisé = vertical
- column : axe principal = vertical, croisé = horizontal

Cela affecte :
- justify-content (alignement axe principal)
- align-items (alignement axe croisé)
- interprétation de flex-basis

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

Ils contrôlent l'alignement sur différents axes :

justify-content (Axe Principal) :
- flex-start : Grouper items au début
- flex-end : Grouper items à la fin
- center : Centrer items
- space-between : Espace uniforme entre items
- space-around : Espace uniforme autour des items
- space-evenly : Espace égal partout

align-items (Axe Croisé) :
- stretch : Étirer pour remplir le conteneur
- flex-start : Aligner au début
- flex-end : Aligner à la fin
- center : Centrer items
- baseline : Aligner lignes de base du texte

Motifs courants :
center + center = Centrage parfait
space-between + center = Barre de navigation
flex-start + stretch = Layout sidebar

Comment fonctionnent flex-grow, flex-shrink et flex-basis ?

Ceux-ci contrôlent comment les items se dimensionnent :

flex-grow (défaut : 0) :
- Combien l'item grandit par rapport aux autres
- 0 = ne pas grandir
- 1 = grandir également avec autres items flex-grow: 1
- 2 = grandir deux fois plus que items flex-grow: 1

flex-shrink (défaut : 1) :
- Combien l'item rétrécit quand l'espace est limité
- 0 = ne pas rétrécir
- 1 = rétrécir également
- Plus élevé = rétrécir plus

flex-basis (défaut : auto) :
- Taille initiale avant croissance/rétrécissement
- auto = utiliser contenu/width/height
- 0 = ignorer taille du contenu
- 200px = commencer à 200px
- 25% = commencer à 25% du conteneur

Quels sont les motifs de layout flexbox courants ?

Motifs flexbox populaires :

Centrage :
justify-content: center;
align-items: center;

Barre de Navigation :
justify-content: space-between;
align-items: center;

Colonnes de Largeur Égale :
.item { flex: 1; }

Layout Sidebar :
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }

Holy Grail (3 colonnes) :
.left { flex: 0 0 200px; }
.center { flex: 1; }
.right { flex: 0 0 200px; }

Grille de Cards :
flex-wrap: wrap;
gap: 20px;
.card { flex: 0 0 calc(33.33% - 20px); }

Cet outil inclut ces préréglages !

Que signifie le flex shorthand (flex: grow shrink basis) ?

flex est le raccourci de flex-grow, flex-shrink et flex-basis dans cet ordre. La plupart des bases de code et des linters l'attendent au lieu de trois lignes séparées, c'est pourquoi cet outil le génère par défaut (désactivez-le pour voir la forme longue).

flex: 1 1 0 → grandit pour remplir, peut rétrécir, ignore la taille du contenu (colonnes égales)
flex: 0 0 200px → fixe à 200px, ne grandit ni ne rétrécit (sidebar)
flex: 1 1 auto → grandit mais part de la taille du contenu

Formes à valeur unique courantes :
flex: 1 = flex: 1 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto
flex: initial = flex: 0 1 auto (le défaut)

Cas limites :
- Une valeur unique sans unité (flex: 1) met flex-basis à 0, pas à auto. Cela piège : flex: 1 s'effondre au contenu zéro, alors que flex-grow: 1 seul garde flex-basis: auto.
- Incluez toujours une unité sur le basis (0% ou 0px) si vous voulez être explicite.

Flexbox vs CSS Grid : quand utiliser l'un ou l'autre ?

Ils résolvent des problèmes différents et travaillent souvent ensemble.

Utilisez Flexbox pour des layouts unidimensionnels (une seule ligne ou colonne) : barres de navigation, toolbars, groupes de boutons, centrer un élément, répartir des items le long d'un axe avec gap et justify-content. Flexbox part du contenu.

Utilisez CSS Grid pour des layouts bidimensionnels (lignes et colonnes à la fois) : gabarits de page, galeries, dashboards, tout ce qui nécessite des pistes explicites et un alignement dans les deux directions. Grid part de la structure.

Règle pratique :
- Aligner des items sur une ligne → Flexbox
- Construire une vraie grille de lignes et colonnes → Grid
- Une page réelle utilise souvent Grid pour le squelette et Flexbox dans chaque cellule.

Les deux prennent en charge la propriété gap et les mêmes mots-clés d'alignement (justify-content, align-items).

Fonctionnalités Clés

• Aperçu en direct interactif
• Toutes propriétés du conteneur (direction, wrap, justify, align)
• Toutes propriétés des items (grow, shrink, basis, align-self, order)
• Ajouter et supprimer flex items
• Cliquez sur items pour éditer propriétés individuelles
• Contrôle de gap pour espacement
• 8 motifs de layout préréglés
• Copier code CSS prêt à l'emploi
• Sortie en flex shorthand canonique (activable/désactivable)
• Bloc de balisage HTML correspondant copiable
• Outil d'apprentissage visuel
• Traitement 100% côté client