Éditeur Flexbox
Éditeur de mise en page Flexbox gratuit en ligne, aperçu visuel en temps réel
Référence des propriétés Flexbox
flex-direction : row | column | row-reverse | column-reverse. justify-content : flex-start | center | flex-end | space-between | space-around | space-evenly. align-items : stretch | flex-start | center | flex-end | baseline. flex-wrap : nowrap | wrap. gap : espacement entre les éléments.
Comment utiliser l'éditeur Flexbox
Ajustez les propriétés du conteneur flex à l'aide des contrôles. L'aperçu montre comment les éléments sont arrangés en temps réel. Ajoutez ou supprimez des éléments pour tester différentes configurations. Copiez le CSS généré pour votre projet.
▶Quelle est la différence entre justify-content et align-items ?
justify-content contrôle l'alignement le long de l'axe principal (horizontal pour row, vertical pour column). align-items contrôle l'alignement le long de l'axe transversal (perpendiculaire à l'axe principal).
▶Comment centrer un élément avec Flexbox ?
Définissez le parent sur display: flex; justify-content: center; align-items: center; Cela centre l'élément enfant à la fois horizontalement et verticalement.
▶Que fait flex-wrap ?
Par défaut, les éléments flex essaient de tenir sur une seule ligne (nowrap). Définir flex-wrap: wrap permet aux éléments de passer à la ligne suivante quand ils manquent d'espace.