Bac à sable Flexbox

Tous les outils

Expérimentez avec les propriétés CSS Flexbox sur des éléments en direct et copiez le CSS de mise en page généré.

Aperçu Cliquez sur un élément pour le modifier
CSS généré
—

Tout s'exécute dans votre navigateur — rien n'est envoyé.

Conteneur
12px
Éléments
0
Élément sélectionné

À propos de Bac à sable Flexbox

Le Flexbox Playground est un bac à sable pratique pour le CSS flexbox. Réglez les propriétés du conteneur — flex-direction, flex-wrap, justify-content, align-items, align-content et gap — et observez jusqu'à 12 éléments en direct se réorganiser dans l'aperçu à chaque changement de valeur. C'est le moyen le plus rapide d'intégrer ce que fait réellement chaque propriété.

Les éléments sont modifiables individuellement: cliquez sur l'un d'eux pour le sélectionner et ajuster son flex-grow, flex-shrink, flex-basis, align-self et order. Voir un élément grandir pour absorber l'espace libre pendant que ses voisins conservent leur largeur enseigne le modèle de dimensionnement flex plus vite qu'aucun schéma.

Le playground génère un CSS propre pour le conteneur et tout élément avec des réglages non par défaut — copiez-le directement dans votre feuille de style. Tout fonctionne dans votre navigateur sans rien téléverser, et un bouton de réinitialisation vous ramène à un état vierge.

Comment utiliser Bac à sable Flexbox

  1. Réglez le flex-direction, wrap, justify-content, align-items, align-content et gap du conteneur.
  2. Ajoutez ou supprimez des éléments — entre 2 et 12 — pour refléter votre composant réel.
  3. Cliquez sur un élément et ajustez son grow, shrink, basis, align-self et order.
  4. Observez l'aperçu en direct se mettre à jour à chaque changement.
  5. Copiez le CSS généré et collez-le dans votre projet.

Questions fréquentes

flex-grow répartit l'espace restant: un élément avec grow 2 reçoit deux fois plus d'espace supplémentaire qu'un élément avec grow 1. flex-shrink fonctionne à l'inverse quand l'espace manque. Les deux sont des ratios entre éléments voisins, pas des tailles absolues.

align-items positionne les éléments le long de l'axe transversal au sein de leur ligne. align-content espace plusieurs lignes enveloppées dans le conteneur — son effet n'est visible que lorsque flex-wrap produit plus d'une ligne.

Chaque élément flex a par défaut order 0; les éléments sont disposés du plus bas au plus haut order. Changer l'order d'un élément le déplace visuellement sans toucher au HTML — l'ordre du DOM, et donc l'ordre pour les lecteurs d'écran, reste inchangé.

Oui. Le CSS généré couvre les règles du conteneur ainsi qu'un sélecteur pour chaque élément dont le grow, shrink, basis, align-self ou order diffère de la valeur par défaut, afin que vous puissiez coller une mise en page complète et fonctionnelle.

Oui — gratuit, sans inscription, et entièrement côté client. Vos expérimentations ne quittent jamais l'onglet du navigateur.
Partager
Outils similaires
Générateur de signature e-mail Créez une signature e-mail HTML professionnelle parmi 30 modèles, personnalisez-la et enregistrez-la. Gratuit
Icône en PNG Convertissez Bootstrap Icons, Font Awesome et plus en images PNG personnalisées — gratuit, dans votre navigateur. Gratuit
Générateur d'icônes d'app Générez un jeu complet d'icônes prêtes à publier pour l'App Store et Google Play — superbes fonds dégradés, mesh et motifs, à partir de votre logo. Gratuit
Générateur de favicon Créez un pack complet de favicons à partir d'un logo, d'une icône ou d'un monogramme — favicon.ico, PNG modernes, icône Apple, icônes PWA, manifeste web et extrait HTML. Gratuit
Générateur d'ombre portée CSS Composez des ombres portées CSS en couches avec des curseurs en direct pour le décalage, le flou, l'étalement, la couleur, l'opacité et le mode intérieur — prévisualisez sur un vrai élément et copiez le CSS prêt à coller instantanément. Gratuit
Générateur de border-radius CSS Créez visuellement des border-radius CSS avec aperçu en direct et copiez un code prêt pour la production. Gratuit
Recherches populaires
bac à sable flexbox générateur flexbox css générateur de conteneur flex outil justify-content align-items générateur de mise en page flex css visualiseur flexbox générateur de code flexbox
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.