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.
Ajoutez un fichier et lancez l’outil.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Réglages
Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.
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.
Guides
Un aperçu plus précis de problèmes concrets que résout cet outil.
Why Flex Items Never End Up the Width You Gave Them
In flexbox, a width is a starting point, not a promise. flex-basis sets where each item begins, then grow and shrink hand out or take back whatever space is left on the line. Once you see that, most surprises stop being surprises.
Lire le guideHow to Make One Flex Item Fill the Remaining Space
A fixed-width sidebar next to a column that takes everything else is two flex properties. Getting it to stay fixed when the window narrows, and stopping long content from breaking it, takes two more. Here is the whole set, built live.
Lire le guideA Flexbox Header Row That Survives Longer Words
Logo on one side, links in the middle, a button on the other: space-between does it in one line. Then the page is translated, the words get longer, and the row overflows. This is how this site's own header handles it.
Lire le guide
Commentaires