Terrain de jeu CSS Flexbox

Expérimente flex-direction, wrap, justify-content, align-items et gap — aperçu en direct et CSS à copier.

L'outil interactif a besoin de JavaScript pour fonctionner. Tout le reste de cette page — son fonctionnement, un exemple chiffré et les réponses aux questions courantes — se trouve plus bas et n'a besoin de rien.

Outils similaires

Tous les outils : Couleurs & CSS →

Compresseur CSSMinifie le CSS en retirant commentaires et espaces pour réduire la taille de ta feuille de style.Générateur de CSS GridConstruis une mise en page CSS Grid visuellement — colonnes, lignes, espaces et alignement — avec aperçu en direct et CSS à copier.Embellisseur CSSReformate du CSS minifié ou désordonné en règles propres et bien indentées — ou reminifie-le.Générateur d'ombre CSS (box-shadow)Règle une ombre CSS avec aperçu en direct et copie le code généré — décalage, flou, étendue, couleur, inset.Vérificateur de contraste des couleursRapport de contraste WCAG entre texte et fond, avec réussite/échec AA/AAA et un aperçu en direct.Inverseur de couleurInverse une couleur (255 − RGB) ou prends sa complémentaire, en HEX/RGB/HSL/CMYK avec le contraste.Générateur de palette harmoniqueDérive des harmonies complémentaire, analogue, triadique, tétradique, divisée et monochromatique d'une couleur de base.Générateur de dégradé CSSConstruis un dégradé CSS linéaire ou radial à partir de deux couleurs et d'un angle, avec sortie CSS et Tailwind.

Ouvre Terrain de jeu CSS Flexbox et tu obtiens une réponse immédiatement, sans compte à créer. Sa place est sous Couleurs & CSS ; Compresseur CSS et Générateur de CSS Grid répondent aux questions les plus proches.

Comment l'utiliser

Ouvre l'outil — sans inscription ni installation.
Saisis tes données ou ajuste les options disponibles.
Obtiens ton résultat instantanément, puis copie-le ou télécharge-le.

Questions fréquentes

Qu'est-ce que Terrain de jeu CSS Flexbox ?

Expérimente flex-direction, wrap, justify-content, align-items et gap — aperçu en direct et CSS à copier.

Dans quels cas s'en sert-on concrètement ?

Faire passer une couleur d'un outil de design à une feuille de style, construire une palette autour d'une couleur de marque, et vérifier qu'un texte y restera lisible.

Quelle est l'erreur la plus fréquente ?

Juger le contraste à l'œil. Deux couleurs qui paraissent distinctes sur un écran lumineux peuvent échouer nettement au rapport d'accessibilité — et c'est ce rapport qu'un audit mesurera.

En quoi Terrain de jeu CSS Flexbox diffère-t-il de Compresseur CSS ?

Ils se ressemblent mais répondent à des questions différentes : Compresseur CSS est celui à ouvrir lorsqu'il s'agit de minifie le CSS en retirant commentaires et espaces pour réduire la taille de ta feuille de style. Choisis celui qui correspond à ton point de départ — les deux sont gratuits.

Existe-t-il un outil pour l'étape suivante ?

Générateur de CSS Grid est le plus proche après celui-ci : Construis une mise en page CSS Grid visuellement — colonnes, lignes, espaces et alignement — avec aperçu en direct et CSS à copier.

Quels autres outils vaut-il la peine d'ouvrir à côté ?

Embellisseur CSS et Générateur d'ombre CSS (box-shadow) — ils reviennent assez souvent dans la même tâche pour mériter un second onglet.

D'où viennent les données ?

Les conversions HEX, RGB et HSL sont exactes. Le contraste suit la formule de luminance relative WCAG 2 ; le CMJN dépend du périphérique, une valeur à l'écran n'est donc qu'une approximation du rendu imprimé.

Pour aller plus loin

Tous les guides →

ExplicationDégradés, banding, et pourquoi le milieu paraît terneInterpoler en sRGB revient à moyenner des nombres encodés en gamma : le milieu de rouge à vert vaut #808000 alors que la réponse à mi-lumière est #bcbc00 — 57,2 % de lumière en moins. Le banding est un autre problème d'arithmétique : 8 bits donnent 256 paliers, et un dégradé sombre peut n'en avoir que 28. Voici les deux, calculés.ExplicationLes harmonies de couleurs sont de la géométrie sur une roue — et la roue est fausseComplémentaire, triadique, analogue et complémentaire divisée ne sont que des rotations : ajoute 180°, 120°, 30° ou 150° à une teinte. L'arithmétique est triviale. Le problème, c'est que le cercle de teintes HSL n'est pas perceptuellement uniforme — le jaune et le bleu à la même clarté HSL diffèrent d'un facteur 12,85 en luminance — donc une palette générée doit être vérifiée en contraste ensuite.GuideCe qu'un minifieur peut retirer, et ce qu'il ne doit pas toucherLa minification doit préserver le sens, et l'intéressant, ce sont les espaces qui portent du sens : le combinateur de descendance, les espaces dans calc(), l'écart entre deux éléments en ligne. Mesuré ici sur de vrais fichiers, y compris ce que brotli te faisait déjà gagner.ExplicationRapport de contraste : comment le WCAG le calcule vraimentLe rapport WCAG vaut (L1 + 0,05) ÷ (L2 + 0,05), et L est la luminance relative, pas la luminosité. Le vert en porte 71,52 % et le bleu 7,22 %, d'où le bleu pur sur blanc qui passe à 8,59:1 tandis que le gris moyen échoue à 3,95:1. Voici tout le calcul, exécuté de bout en bout.TutorielHEX vs RGB : lire et convertir les couleursHEX et RGB sont deux notations des mêmes couleurs. Voici comment lire chacune, convertir de l'une à l'autre et ajouter de la transparence.GuideEmbellir ou minifier : à quoi sert chacun, et ce que ça change au poidsQuatre vraies feuilles de style passées au minifieur, mesurées brutes puis après gzip. Retirer toutes les espaces a fait gagner 48, 103, 104 et 147 octets compressés ; retirer les commentaires, 57, 1 358, 2 420 et 1 042. Et les cinq entrées que ce minifieur casse.