Générateur de Flexbox CSS

Contrôles

8px
3

Aperçu & CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Choisissez la direction — Sélectionnez flex-direction pour définir l'axe principal : row (horizontal) ou column (vertical).
    2.  
  2. Alignez l'axe principal — Utilisez justify-content pour répartir les éléments le long de l'axe principal.
    3.  
  3. Alignez l'axe transversal — Utilisez align-items pour aligner les éléments perpendiculairement à l'axe principal.
    4.  
  4. Contrôlez le retour à la ligne — Définissez flex-wrap pour permettre aux éléments de passer à la ligne suivante.
    5.  
  5. Définissez le gap — Faites glisser le curseur gap pour ajouter de l'espace entre les éléments.
    6.  
  6. Ajustez le nombre — Changez le nombre d'éléments pour prévisualiser différentes mises en page.
    7.  
 
 
 
Qu'est-ce que CSS Flexbox ?
 
Flexbox (Flexible Box Layout) est un modèle de mise en page CSS conçu pour les dispositions unidimensionnelles — une ligne ou une colonne. Il simplifie l'alignement et la répartition de l'espace entre les éléments, même lorsque leurs tailles sont dynamiques.
 
Utilisez flexbox pour les barres de navigation, rangées de cartes, contenu centré et toute mise en page où les éléments doivent s'aligner sur un seul axe. Pour les grilles bidimensionnelles, CSS Grid est généralement plus approprié.
 
 
 
Cas d'usage courants
 
 
Barres de navigation
 
Sections hero centrées
 
Rangées de cartes
 
Mises en page de formulaires
 
Colonnes de pied de page
 
Groupes de boutons
 
 
Conseils & bonnes pratiques
 
 
 Utilisez gap plutôt que margin 
gap n'ajoute de l'espace qu'entre les éléments, pas sur les bords externes — plus propre que d'ajouter des marges à chaque enfant.
 
 
 flex: 1 pour des largeurs égales 
Appliquez flex: 1 aux éléments enfants pour qu'ils partagent l'espace disponible à parts égales sans spécifier de largeurs fixes.
 
 
 min-width: 0 sur les enfants 
Les éléments flex ont une taille minimale par défaut basée sur le contenu. Définir min-width: 0 permet à la troncature de texte et au débordement de fonctionner correctement dans les éléments flex.
 
 
 Flexbox vs Grid 
Flexbox excelle dans les mises en page unidimensionnelles (une ligne ou une colonne). Utilisez CSS Grid lorsque vous devez contrôler simultanément les lignes et les colonnes.
 
 
 
Questions fréquentes
 
 
Quelle différence entre justify-content et align-items ?
 
justify-content aligne les éléments le long de l'axe principal (horizontal en row, vertical en column). align-items les aligne le long de l'axe transversal (perpendiculaire à l'axe principal).
 
 
 
Quand utiliser flex-wrap: wrap ?
 
Utilisez flex-wrap: wrap lorsque vous voulez que les éléments passent à une nouvelle ligne s'ils ne tiennent pas sur une seule rangée. Cela crée des mises en page responsives sans media queries.
 
 
 
Comment centrer un élément verticalement et horizontalement avec flexbox ?
 
Définissez le conteneur sur display: flex; justify-content: center; align-items: center; et il centrera ses enfants sur les deux axes.
 
 
 
Que fait flex-direction: column ?
 
Il bascule l'axe principal en vertical, donc les éléments s'empilent de haut en bas au lieu de gauche à droite. justify-content contrôle alors la répartition verticale, et align-items l'alignement horizontal.