Générateur de Flexbox CSS
Choisissez visuellement les propriétés d'un conteneur Flexbox (direction, alignement, espacement, retour à la ligne) et récupérez le code CSS correspondant, avec aperçu en direct.
Comment ça marche
Flexbox est le système de mise en page CSS le plus utilisé pour aligner des éléments sur un axe (ligne ou colonne). Cet outil vous évite de mémoriser les valeurs exactes de justify-content ou align-items : ajustez les menus déroulants et copiez directement le bloc CSS généré dans votre feuille de style.
Quelle est la différence entre justify-content et align-items ?
justify-content aligne les éléments le long de l'axe principal (défini par flex-direction), tandis que align-items les aligne le long de l'axe perpendiculaire (l'axe secondaire).
Quand dois-je activer flex-wrap ?
Activez-le lorsque vous voulez que les éléments passent à la ligne suivante quand ils ne tiennent plus dans la largeur du conteneur, plutôt que d'être compressés ou de déborder.
Traitement 100% local : le code est généré entièrement dans votre navigateur via WebAssembly.