Bac à sable Flexbox
Tester les propriétés flex sans écrire de CSS.
Données d’entrée
Cet outil fonctionne entièrement dans votre navigateur. Les données saisies ou chargées ne sont jamais envoyées.
Résultat
Saisissez vos données, puis lancez l’outil.
À propos de cet outil
Manipule justify-content, align-items, flex-direction, gap et flex-wrap sur un conteneur d’exemple, avec le code CSS correspondant affiché en parallèle.
Comment l’utiliser
- Modifiez les propriétés du conteneur et des enfants.
- Observez le rendu puis copiez le CSS obtenu.
Questions fréquentes
Flexbox ou grid ?
Flexbox aligne sur un axe, ce qui convient aux barres et aux rangées ; grid gère deux dimensions à la fois.
Pourquoi mon élément ne se centre-t-il pas ?
Vérifiez la direction : align-items agit sur l’axe transversal, justify-content sur l’axe principal.
Pour aller plus loin
Outils liés
Bac à sable CSS Grid
Explorer les colonnes, les lignes et les zones d’une grille.
Générateur de border-radius
Arrondir les coins d’un élément, y compris en ellipse.
Générateur d’ombre CSS
Composer un box-shadow avec aperçu en direct.
HEX vers RGB
Convertir une couleur HEX en valeurs RGB.
RGB vers HEX
Convertir des valeurs RGB en code HEX.
RGB vers HSL
Passer d’une couleur RGB à sa teinte, saturation et luminosité.