Générateur de flexbox CSS
Ajustez les propriétés flex et voyez la mise en page en direct, puis copiez le CSS.
Générateur de flexbox CSS
Construisez une mise en page flexbox CSS visuellement et copiez le code. Ajustez flex-direction, justify-content, align-items et gap, et regardez trois boîtes de démonstration se réorganiser en direct dans l’aperçu.
Flexbox en bref
Mettez display: flex sur un conteneur. flex-direction définit l’axe principal (ligne ou colonne) ; justify-content aligne les éléments le long de cet axe ; align-items les aligne sur l’axe transversal ; gap ajoute de l’espace entre les éléments. C’est l’outil de référence pour les mises en page unidimensionnelles comme les barres de navigation.
Questions fréquentes
Différence entre justify-content et align-items ? justify-content agit sur l’axe principal ; align-items sur l’axe transversal.
Flexbox ou grid ? Flexbox pour une dimension (une ligne ou colonne) ; grid pour deux dimensions.