Générateur Flexbox

Générateur CSS Flexbox - Apprendre et Créer des Layouts Flex

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 prêt à l'emploi.

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 !

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
• Outil d'apprentissage visuel
• Traitement 100% côté client