Générateur CSS Flexbox
Modifiez les propriétés du conteneur et de chaque élément et voyez aussitôt leur disposition. C’est le moyen le plus rapide de comprendre flexbox sans écrire du code à l’aveugle : quand le résultat vous convient, copiez uniquement le CSS que vous avez modifié.
Traité à 100 % dans votre navigateur
Cliquez sur un élément de l’aperçu pour le modifier.
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Réglez la direction, le retour à la ligne, la justification et l’alignement du conteneur.
- 2Choisissez combien d’éléments afficher dans l’aperçu.
- 3Cliquez sur un élément pour changer son grow, shrink, basis, align-self et son ordre.
- 4Copiez le CSS généré.
Cas d’usage
- Centrer un élément horizontalement et verticalement.
- Construire une barre de navigation aux liens bien répartis.
- Créer une rangée de cartes qui passe sur plusieurs lignes sur petit écran.
- Apprendre la différence entre justify-content et align-items.
Questions fréquentes
Quelle différence entre justify-content et align-items ?
justify-content répartit les éléments le long de l’axe principal (la ligne, par défaut) et align-items les aligne sur l’axe transversal. Si vous passez la direction en colonne, les axes s’inversent.
Comment centrer un élément avec flexbox ?
Sur le conteneur, utilisez justify-content: center et align-items: center. Le conteneur doit avoir une hauteur pour que le centrage vertical soit visible.
Que signifie flex: 1 1 auto ?
Ce sont grow, shrink et basis : de combien l’élément peut grandir, de combien il peut rétrécir, et sa taille de départ avant le partage de l’espace restant.
Quand utiliser flexbox et quand grid ?
Flexbox convient pour organiser des éléments sur une seule dimension, ligne ou colonne. Pour des grilles de lignes et de colonnes à la fois, utilisez CSS Grid.