Bac à sable CSS Flexbox
Expérimentez visuellement avec les propriétés des conteneurs et éléments flexbox. Générez du CSS, du Tailwind et du HTML avec aperçu en direct et préréglages pour les mises en page courantes.
Mis à jour le
CSS Flexbox Playground
Visually experiment with CSS flexbox container and item properties, then copy CSS, Tailwind, or HTML output.
Preset Scenarios
Containerflex
Live Preview3 items
Items (3/12)
Generated Code
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}
.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}Questions Fréquentes
Qu'est-ce que le CSS Flexbox Playground ?
Le CSS Flexbox Playground est un outil en ligne gratuit pour expérimenter visuellement avec les propriétés des conteneurs et des éléments flexbox. Il génère une sortie en CSS, Tailwind et HTML avec un aperçu en direct et des préréglages pour les mises en page courantes. Il fonctionne entièrement dans votre navigateur, sans installation ni inscription.
flex ou inline-flex ?
display:flex est un conteneur flex de niveau bloc qui occupe toute la largeur du parent. inline-flex est de niveau ligne et n'occupe que la largeur de son contenu, s'intégrant au texte environnant.
flex-grow ou flex-basis ?
flex-basis définit la taille initiale avant la répartition de l'espace libre. flex-grow définit comment l'espace libre restant est partagé entre les éléments.
Comment centrer le contenu ?
Parent : display:flex + justify-content:center + align-items:center. Le préréglage Centré applique exactement cette configuration.
Le CSS Flexbox Playground est-il gratuit ?
Oui, le CSS Flexbox Playground est 100% gratuit, sans inscription, sans frais cachés et sans limite d'utilisation. Tout le traitement s'effectue localement dans votre navigateur, garantissant une confidentialité totale.
Mes données sont-elles en sécurité avec cet outil ?
Absolument. Le CSS Flexbox Playground traite tout côté client, dans votre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.
Le CSS Flexbox Playground fonctionne-t-il sur les appareils mobiles ?
Oui, le CSS Flexbox Playground est entièrement responsive et fonctionne sur smartphones et tablettes. Vous pouvez l'utiliser sur n'importe quel appareil doté d'un navigateur web moderne, sans aucun téléchargement d'application.
Dois-je créer un compte pour utiliser cet outil ?
Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le CSS Flexbox Playground dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'utilisation.
Quels langages de programmation ou formats cet outil prend-il en charge ?
Le CSS Flexbox Playground prend en charge un large éventail de formats et de langages populaires. Consultez l'interface de l'outil pour la liste complète des options prises en charge.
Quels navigateurs sont pris en charge ?
Le CSS Flexbox Playground fonctionne sur tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.
Outils Associés
Testeur d'API en Ligne Gratuit
Testez des API REST avec des requêtes GET, POST, PUT et DELETE. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.
Convertisseur cURL en Code Gratuit
Convertissez des commandes cURL en code JavaScript, Python ou PHP. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.
Générateur de JSON Schema Gratuit
Générez un JSON Schema à partir de vos données JSON automatiquement. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.
Analyseur d'En-têtes HTTP Gratuit
Analysez et inspectez les en-têtes HTTP des requêtes et des réponses. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.
À propos de Bac à sable CSS Flexbox
Bac à sable CSS Flexbox est un outil gratuit qui fonctionne dans le navigateur, au sein de notre collection Outils pour développeurs. Tout s'exécute localement sur votre appareil : aucun téléversement, aucune inscription, et vos données restent privées.