Aller au contenu
EN

Générateur Flexbox et CSS Grid

Testez flexbox et CSS Grid en direct : direction, alignement, retour à la ligne, colonnes, espacements et taille de chaque élément. Copiez le code CSS.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Apprenez et réglez flexbox et CSS Grid en voyant le résultat immédiatement : direction, retour à la ligne, justify-content, align-items, align-content, gap, colonnes fixes ou automatiques, et taille de chaque élément (flex-grow, nombre de colonnes ou de lignes occupées). Le code CSS est prêt à copier.

Dans quels cas l'utiliser ?

Apprendre la mise en page CSS

Changer une propriété et voir aussitôt les éléments bouger est le moyen le plus rapide de comprendre la différence entre justify-content et align-items.

Construire une barre de navigation

Logo à gauche, liens à droite : justify-content: space-between et align-items: center règlent le problème en deux lignes.

Créer une galerie qui s'adapte

Une grille à largeur minimale place 1 colonne sur téléphone et 4 sur grand écran, sans aucune media query.

Mode d'emploi

  1. Choisissez Flexbox ou Grille.
  2. Réglez les propriétés du conteneur et regardez les éléments se placer.
  3. Touchez un élément pour régler sa taille, puis copiez le code.

Comment ça marche

L'aperçu est une vraie boîte flexbox ou grid rendue par votre navigateur avec le code affiché : ce n'est pas une simulation. La zone d'aperçu est redimensionnable pour tester le comportement sur différentes largeurs.

Seules les propriétés qui diffèrent des valeurs par défaut sont écrites. Les réglages propres à un élément produisent une règle .element:nth-child(n) séparée.

Conseils pour un bon résultat

  • Utilisez gap plutôt que des marges : l'espace n'apparaît qu'entre les éléments.
  • Pour centrer parfaitement un élément, display: grid et place-items: center suffisent.
  • flex-grow: 1 sur un seul élément lui fait prendre tout l'espace restant (barre de recherche, contenu principal).
  • Redimensionnez la zone d'aperçu pour vérifier le comportement sur mobile.

Problèmes fréquents et solutions

align-content n'a aucun effet

Il ne s'applique qu'avec plusieurs lignes : activez flex-wrap: wrap et ajoutez des éléments.

Les éléments débordent du conteneur

Avec flex-wrap: nowrap, ils restent sur une ligne. Passez en wrap ou réduisez leur taille.

La grille n'a qu'une colonne

Avec une largeur minimale trop grande pour la zone, une seule colonne tient. Réduisez la largeur minimale.

Questions fréquentes

Flexbox ou Grid : lequel choisir ?

Flexbox range des éléments sur une ligne (ou une colonne) et répartit l'espace entre eux : barres de menu, boutons, cartes alignées. Grid organise en lignes et colonnes à la fois : mises en page de pages, galeries, tableaux de bord.

Que fait justify-content ?

Il répartit les éléments le long de l'axe principal : au début, au centre, à la fin, ou avec des espaces égaux entre eux.

Comment faire une grille qui s'adapte à l'écran ?

Réglez une largeur minimale : la grille utilise repeat(auto-fill, minmax(…, 1fr)) et place autant de colonnes que la largeur le permet, sans media query.

Pourquoi certaines propriétés n'apparaissent-elles pas dans le code ?

L'outil n'écrit que ce qui change par rapport aux valeurs par défaut : le code reste court et lisible.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.