Expérimentez les propriétés flexbox sur un aperçu en direct et copiez le CSS généré.
À propos de cet outil
Le terrain de jeu CSS Flexbox est un éditeur interactif pour les principales propriétés de mise en page d'un conteneur flex. Choisissez des valeurs pour flex-direction, justify-content, align-items et flex-wrap dans quatre menus déroulants, et un aperçu de cinq boîtes numérotées se réagence instantanément, de sorte que vous voyez comment chaque propriété façonne la mise en page avant d'écrire la moindre ligne de code.
Sous l'aperçu, la règle .container correspondante est générée à mesure que vous travaillez : display: flex suivi des quatre déclarations que vous avez choisies. Un bouton copie tout le bloc dans votre presse-papiers, prêt à coller dans une feuille de style. Seules ces propriétés au niveau du conteneur sont exposées ; les réglages par élément tels que flex-grow, order ou align-self ne sont pas couverts.
Tout s'exécute dans votre navigateur. Rien n'est téléversé, il n'y a ni compte ni suivi, et cela fonctionne hors ligne. C'est un moyen rapide de développer votre intuition de flexbox ou de produire une règle de départ que vous affinez ensuite à la main.
Foire aux questions
Qu'affiche l'aperçu ?
Un conteneur flex contenant cinq boîtes numérotées qui se réagencent en direct à mesure que vous changez flex-direction, justify-content, align-items ou flex-wrap.
Le CSS généré est-il prêt à l'emploi ?
Oui. Copiez la règle .container générée directement dans votre feuille de style ; elle contient display: flex plus les quatre propriétés que vous avez sélectionnées.
Quelles propriétés flexbox puis-je ajuster ?
Quatre menus déroulants contrôlent flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline) et flex-wrap (nowrap, wrap, wrap-reverse).
La sortie inclut-elle gap ou des réglages flex par élément ?
Non. La règle copiée ne contient que display: flex et les quatre propriétés du conteneur. Le gap de 8px dans l'aperçu ne sert qu'à l'espacement, et les propriétés au niveau des éléments comme flex-grow, order ou align-self ne sont pas incluses.