À propos de cet outil
Flexbox est la colonne vertébrale de la mise en page CSS moderne, mais ses propriétés sont difficiles à retenir tant qu’on ne les a pas vues à l’œuvre. Ce générateur transforme flex-direction, justify-content, align-items, flex-wrap et gap en contrôles simples, avec une rangée d’éléments réels qui se réorganisent à l’instant où vous changez quoi que ce soit.
C’est la façon la plus rapide de comprendre comment les propriétés interagissent — et quand la mise en page vous convient, copiez le CSS du conteneur. Tout tourne dans votre navigateur.
Questions fréquentes
Cet outil génère-t-il le CSS du conteneur ou des éléments individuels ?
Il génère les propriétés flex du conteneur parent (flex-direction, justify-content, align-items, flex-wrap, gap) — les propriétés par élément comme flex-grow ou order ne sont pas couvertes.
Quelle est la différence entre justify-content et align-items ?
justify-content contrôle l'espacement le long de l'axe principal (horizontal dans une disposition en ligne), tandis qu'align-items contrôle l'alignement le long de l'axe transversal (vertical dans une disposition en ligne).
Ai-je besoin de préfixes propriétaires pour flexbox dans des projets modernes ?
Non, tous les navigateurs actuels prennent en charge les propriétés flexbox sans préfixe ; l'ancienne syntaxe -webkit-box / -ms-flexbox n'est nécessaire que pour des navigateurs vieux de plus de dix ans.
Mes données de mise en page sont-elles envoyées quelque part ?
Non. L'aperçu et le CSS généré fonctionnent entièrement dans votre navigateur — rien n'est envoyé à un serveur.
Pourquoi les valeurs de gap ne s'appliquent-elles pas dans certains anciens navigateurs ?
La propriété gap dans les conteneurs flex est prise en charge par tous les navigateurs sortis après 2021 ; pour les navigateurs plus anciens, utilisez plutôt des marges sur les éléments.