Éditeur de Flexbox
Outil d’édition de mise en page Flexbox en ligne gratuit, avec prise en compte de la prise en compte en temps réel visuellement
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.
Si cet outil vous a été utile, pensez à m’offrir un café.
Achetez-moi un café.