- CSS Flexbox Playground est un outil d’apprentissage qui permet de modifier les propriétés Flexbox en temps réel afin d’observer les changements de mise en page
- En ajustant les contrôles, on peut comparer immédiatement l’impact des réglages flex sur la disposition à l’écran
- L’exemple de base commence avec la combinaison
display: flex, flex-direction: row, justify-content: space-around, align-items: flex-start, flex-wrap: nowrap
- Les éléments
1 à 5 à l’écran se déplacent selon les changements de réglage, ce qui facilite l’observation visuelle du résultat de mise en page
- Le code CSS généré peut être copié, ce qui facilite le transfert des réglages testés vers du code réel
Outil d’expérimentation Flexbox en temps réel
- CSS Flexbox Playground est un outil interactif pour apprendre et expérimenter les propriétés Flexbox
- En ajustant les contrôles, les changements de mise en page sont appliqués en temps réel
- Le code CSS généré à partir de l’expérimentation peut être copié
Configuration de l’exemple de base
- L’exemple de configuration
.container utilise le CSS suivant
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
flex-wrap: nowrap;
}
- Les éléments
1, 2, 3, 4, 5 sont affichés à l’écran, ce qui permet de vérifier le résultat de la disposition Flexbox
1 commentaires
Avis sur Hacker News
Flexbox en soi est simple et logique, mais les noms des propriétés et des valeurs ont été décidés façon comité, ce qui les rend peu intuitifs
À force d’essayer de se rappeler laquelle de
justify-contentetalign-itemsfait quoi, on finit par abandonner et par tout modifier au hasard jusqu’à ce que ça marcheIl existe aussi un guide similaire pour Grid, qui est excellent lui aussi
C’est particulièrement important dans les SPA, quand les boîtes doivent remplir l’écran sans déborder. Au final, on met un peu partout des réglages pas du tout intuitifs comme
min-width: 0, puis on ajuste encore deux ou trois choses jusqu’à ce que ça finisse par fonctionnerJ’ai l’impression qu’on pourrait créer quelques classes CSS couvrant tout ça, mais je n’ai pas encore trouvé de solution adaptée à tous les cas
display: flex, plusieurs propriétés Flexbox sont visualisées sous forme d’icônes et peuvent être appliquées directement en cliquantEn pratique, chaque page devient un terrain d’expérimentation
justify-content: centerdevientjustify-center, tandis quealign-items: centerdevientitems-center; je ne comprends pas pourquoi ils ont fait çajustify-contentaurait dû s’appelermain-axis, etalign-itemscross-axisUne fois qu’on comprend ça, tout Flexbox devient plus facile
Cela a déjà été beaucoup cité, mais je recommande Flexbox Froggy https://flexboxfroggy.com/ depuis longtemps, et d’autres personnes l’ont assimilé rapidement
Pour apprendre CSS Grid, https://cssgridgarden.com/ est aussi très bien
C’est similaire à https://www.codemonkey.com/, qui est plutôt destiné aux enfants
Pour générer du code Bootstrap, https://build.layoutit.com/ est utile, et pour CSS Grid il y a https://grid.layoutit.com/. Dommage toutefois que le premier ne prenne en charge que Bootstrap 4, et non Bootstrap 5
Je recommande vivement le guide de Josh https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
Il couvre en détail des pièges et astuces plus avancés comme
flex-basis, les marges automatiques etmin-widthJe pensais assez bien connaître Flexbox et les composants Tailwind CSS, mais cet article a vraiment comblé mon besoin de bases théoriques
C’est un bon playground
Il y a quelques années, j’ai créé un guide interactif qui intégrait un playground similaire vers la fin : https://lik.ai/guides/an-interactive-guide-to-flexbox/
Il m’a été utile de temps en temps pour me rafraîchir la mémoire
On est en 2025, deux ans et trois tutoriels plus tard, et je ne sais toujours pas utiliser correctement Flexbox
https://flexboxfroggy.com/ ne m’a pas beaucoup aidé non plus
justifyetalignsont toujours inversés au premier essaiJe me souviens pendant des années de toutes sortes de choses, y compris des layouts avec les floats CSS, mais si je n’utilise pas Flexbox pendant quelques mois, j’en oublie 80 % et je dois tout relire depuis le début et passer du temps dans un playground
Le problème, c’est qu’il y a trop de noms de propriétés, dont beaucoup ne sont pas intuitifs ou donnent carrément l’impression d’être mal nommés. Même avec des noms symboliques d’une ou deux lettres, cela n’aurait probablement pas été très différent
J’espère que cet outil m’aidera, et n’hésitez pas à me signaler ce qui manque
Pourquoi avoir appelé ces propriétés
justify-contentetalign-items?main-axis-arrangementetcross-axis-alignmentn’auraient-ils pas plus de sens ?C’est aussi le cas de
color,text-align, deposition: absoluteetposition: fixed; mêmeabsolute, techniquement, reste relatif.justify-itemsetjustify-self, donc il y a une certaine cohérence.Mais je les confonds encore avec
align-content.grid-template, qui met l’axe y en premier, est également déroutant :y1 / x1 / y2 / x2En plus, ça ne commence même pas à 0, donc je l’oublie toujours.
Un plugin d’alias Tailwind qui mapperait
cross-axis-centerversalign-items: center, oumain-axis-betweenversjustify-content: space-between, serait rapide à faire.Bien sûr, on peut changer cela, mais le comportement par défaut de Flexbox est couvert par ce moyen mnémotechnique.
Quand j’apprenais Flexbox, j’ai créé une antisèche pour pouvoir retrouver les propriétés.
Elle peut être utile à d’autres : https://darekkay.com/flexbox-cheatsheet/
C’est bien comme antisèche visuelle rapide, mais je pense qu’au final il faut l’utiliser un peu partout dans des projets pour que ça rentre.
La syntaxe est globalement assez auto-explicative, mais
rowetcolumnfont exception.Je n’ai jamais vraiment été bloqué par la plupart de Flexbox ou Grid, mais je vois bien que beaucoup de gens s’y perdent. Comprendre le modèle de boîte et utiliser les outils de développement Firefox aide énormément pour apprendre le modèle Flexbox. Ils visualisent assez bien le conteneur, et il semble que les outils de développement Chrome fassent désormais quelque chose de similaire.
flexboxfroggy et cssgridgarden m’ont aussi été utiles pour m’entraîner. Malgré tout, j’ouvre à chaque fois l’antisèche de CSS-Tricks pour revoir la syntaxe, et je ne devine jamais du premier coup si c’est
rowoucolumn.On peut activer/désactiver rapidement le mode Flex https://imgur.com/a/17iy1eN
Cet outil semble trop limité, car il ne couvre que 4 propriétés du conteneur.
Les propriétés des éléments enfants, pourtant assez importantes dans Flexbox, sont complètement absentes.
Ce serait bien d’avoir une collection de défis intéressants pour pratiquer les mises en page CSS.
Avec des corrigés et explications bien rédigés, ainsi que des exercices de débogage du type « pourquoi ce fragment de code ne produit-il pas la mise en page voulue ? ».
ChatGPT m’a pas mal aidé à déboguer des problèmes CSS. Il n’a pas toujours raison, mais il indique généralement la bonne direction. Cela dit, j’aimerais comprendre plus en profondeur comment CSS fonctionne réellement. J’ai lu des livres et des tutoriels, et je sais qu’au fond c’est un ensemble de règles, mais les appliquer précisément reste difficile.
Je lui demande souvent de corriger le CSS et de le réécrire pour obtenir le rendu voulu, et c’est beaucoup plus rapide que de fouiller la documentation.