Convertisseur de couleurs
Convertissez HEX, RGB et HSL avec transparence, visualisez la couleur et copiez les valeurs CSS.
Générateur CSS Flexbox
Testez direction, retour à la ligne, répartition et alignement pour obtenir le CSS et le HTML correspondants.
À propos de cet outil
Organisez une rangée de boutons et vérifiez son comportement lorsque l’espace manque.
Mode d’emploi
Réglez les propriétés Flex, le nombre d’éléments et l’espacement. Faites varier la largeur pour observer les retours à la ligne, puis exportez CSS et HTML.
L’aperçu utilise les propriétés du code produit. Les éléments partent d’une base de 100 px et d’une hauteur minimale de 80 px. Jusqu’à 48 éléments, espacement de 0 à 80 px. La largeur d’aperçu n’est pas exportée.
Questions fréquentes
La largeur de l’aperçu est-elle exportée ?
Non, elle simule l’espace disponible. L’export contient les règles flex et les dimensions de base des éléments ; largeur réelle et habillage restent à définir dans votre page.
Pourquoi le centrage change-t-il en passant à column ?
justify-content agit sur l’axe principal et align-items sur l’axe transversal. Avec row, l’axe principal est horizontal ; avec column, il est vertical. Pour centrer sur les deux axes, choisissez center pour les deux réglages et prévoyez suffisamment d’espace dans le conteneur sur les axes concernés.
Outils associés
S’ouvre dans un nouvel onglet
Commentaires
0