Outils · CSS · Bac à sable Flexbox
Bac à sable Flexbox
Créez une mise en page CSS flexbox - direction, retour à la ligne, justification, alignement, espacement, et croissance/réduction/base par élément - avec un aperçu en direct, et copiez le code.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Comment ça marche
Choisissez un modèle prédéfini, ou partez de la rangée par défaut.
Réglez les contrôles du conteneur, puis sélectionnez un élément pour ajuster sa propre croissance, réduction et base.
Copiez le CSS généré.
Questions fréquentes
Non. La mise en page et le CSS généré sont entièrement construits dans votre navigateur.
Seules les valeurs qui diffèrent des réglages par défaut du CSS sont écrites, exactement comme le ferait un développeur à la main - un élément non modifié n'ajoute rien à la sortie.
Cette propriété n'a d'effet que sur un conteneur multi-lignes avec retour à la ligne. Activez le retour à la ligne pour en voir l'effet.
Oui, et c'est normal. flex-direction: row s'inverse déjà automatiquement en RTL sans aucun code supplémentaire - cet outil montre le vrai comportement de flexbox, pas une approximation de gauche à droite.
Commentaires