Bac à sable CSS Flexbox

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.

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-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.

Parent : display:flex + justify-content:center + align-items:center. Le préréglage Centré applique exactement cette configuration.

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.

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.

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.

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.

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.

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é.

Ces deux propriétés déplacent les éléments le long d'axes opposés. justify-content positionne les éléments le long de l'axe principal — la direction définie par flex-direction — elle contrôle donc l'espacement horizontal dans une ligne (row) et l'espacement vertical dans une colonne (column). align-items positionne les éléments le long de l'axe transversal, la direction perpendiculaire, donc elle gère l'alignement vertical dans une ligne et horizontal dans une colonne. C'est pourquoi passer flex-direction de row à column semble inverser le rôle de chaque propriété. justify-content propose des valeurs comme flex-start, center, space-between, space-around et space-evenly, tandis qu'align-items propose stretch, flex-start, flex-end, center et baseline. Un moyen simple de s'en souvenir : justify répartit les éléments le long de la ligne, align les positionne verticalement à l'intérieur de celle-ci. Dans ce bac à sable, vous pouvez activer chaque propriété indépendamment et observer l'aperçu en pointillés se réorganiser instantanément, ce qui rend évidente la distinction entre axe principal et axe transversal sans avoir à l'apprendre par cœur dans la spécification, puis copier le CSS ou les classes Tailwind obtenus.

Réglez le conteneur sur display:flex avec flex-wrap:wrap afin que les éléments passent à la ligne suivante lorsqu'ils manquent de place, puis donnez à chaque carte un flex-basis partagé pour contrôler sa largeur avant le retour à la ligne. Une base de 200px combinée à flex-grow permet aux cartes de s'étendre pour remplir la ligne et de se réorganiser en moins de colonnes sur les écrans étroits, le tout sans media queries. L'ajout d'un gap garde un espacement cohérent entre les lignes et les colonnes. Le préréglage Card Grid de ce bac à sable charge exactement cette configuration — six cartes qui s'enroulent en partageant un flex-basis avec un gap de 16px — vous pouvez ainsi étudier une mise en page responsive fonctionnelle, ajuster la base ou le nombre d'éléments, et regarder les colonnes se réorganiser en direct à mesure que la largeur de l'aperçu change. Comme les cartes se dimensionnent à partir de leur base plutôt que d'un nombre de colonnes fixe, les mêmes règles s'adaptent des grands écrans de bureau jusqu'aux téléphones. Une fois le résultat satisfaisant, copiez le CSS ou les classes Tailwind générés directement dans votre projet.

flex est un raccourci pour trois propriétés, dans cet ordre : flex-grow, flex-shrink et flex-basis. Ainsi, flex: 0 0 240px signifie flex-grow:0 (l'élément ne s'étirera pas pour remplir l'espace supplémentaire), flex-shrink:0 (il ne rétrécira pas en dessous de sa taille même si l'espace vient à manquer), et flex-basis:240px (sa largeur de départ est fixée à 240px). Le résultat est un élément rigide, de largeur fixe — parfait pour une barre latérale qui doit rester à 240px de large pendant que la zone de contenu principale s'adapte tout autour. Le préréglage Sidebar Layout utilise exactement cette valeur pour sa colonne fixe à côté d'une zone principale flexible. À l'inverse, flex: 1 se développe en flex-grow:1, flex-shrink:1, flex-basis:0, ce qui pousse un élément à remplir avidement l'espace disponible — un comportement opposé. Comme le bac à sable expose flex-grow, flex-shrink et flex-basis comme contrôles distincts sur chaque carte d'élément, vous pouvez ajuster ce raccourci morceau par morceau, en voir l'effet dans l'aperçu en direct, puis copier le CSS obtenu, propre et prêt à l'emploi.

align-items ne change quelque chose que lorsque les éléments sont plus petits que le conteneur le long de l'axe transversal, puisqu'elle les positionne dans cet espace restant. Deux situations courantes masquent son effet. D'abord, la valeur par défaut d'align-items est stretch, qui fait s'étirer les éléments pour remplir tout l'axe transversal — ils occupent donc déjà toute la hauteur dans une ligne et il n'y a aucun espace dans lequel s'aligner. Ensuite, si chaque élément a la même taille que le conteneur ou n'a pas de hauteur explicite, basculer entre flex-start, center et flex-end ne produit aucun mouvement visible. Donnez aux éléments une largeur ou une hauteur fixe, ou changez align-items pour une valeur différente de stretch, et l'alignement devient évident. Vous pouvez aussi surcharger un seul élément avec align-self si vous souhaitez positionner uniquement un enfant différemment. Dans ce bac à sable, vous pouvez définir la largeur et la hauteur par élément sur chaque carte, puis activer align-items pour voir exactement quand elle prend effet avant de copier le code.

flex-wrap détermine si les éléments flex sont forcés sur une seule ligne ou peuvent se répartir sur plusieurs lignes. Avec nowrap, la valeur par défaut, tous les éléments restent sur une seule ligne et rétrécissent pour s'y ajuster, ce qui peut les écraser ou provoquer un débordement lorsqu'il n'y a pas assez de place. Avec wrap, les éléments qui ne tiennent pas passent à la ligne suivante, conservant leur taille préférée et créant une mise en page multi-lignes — essentiel pour les grilles de cartes responsives et les listes d'étiquettes. Il existe aussi wrap-reverse, qui répartit les lignes supplémentaires empilées dans la direction opposée. Notez qu'align-content, qui distribue ces lignes une fois enroulées, n'a d'effet que lorsque le retour à la ligne produit effectivement plus d'une ligne. Ce bac à sable expose nowrap, wrap et wrap-reverse comme un seul contrôle, vous pouvez donc basculer entre eux et observer les éléments se réorganiser dans l'aperçu en direct avant de copier le code.