Terrain de jeu CSS Flexbox

Créez et déboguez visuellement des mises en page flexbox avec des aperçus en temps réel, des contrôles au niveau des éléments et du CSS prêt à l'exportation pour une implémentation frontale plus rapide.

CSS Flexbox Playground

Configure flex container behavior and per-item flex values visually, then export implementation-ready CSS and markup for responsive UI layouts.

Container Controls

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px)

padding (px)

Item Controls

Item 1

Label

flex-basis (px)

flex-grow

flex-shrink

Item 2

Label

flex-basis (px)

flex-grow

flex-shrink

Item 3

Label

flex-basis (px)

flex-grow

flex-shrink

Item 4

Label

flex-basis (px)

flex-grow

flex-shrink

Item 5

Label

flex-basis (px)

flex-grow

flex-shrink

Item 6

Label

flex-basis (px)

flex-grow

flex-shrink

Live Flex Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Generated Flexbox CSS + Markup

.flex-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
  padding: 12px;
}

.flex-layout__item {
  min-height: 72px;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

<div className="flex-layout">
  <div className="flex-layout__item" style={{ flex: '2 1 180px' }}>
    Item 1
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 2
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 3
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 180px' }}>
    Item 4
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 5
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 6
  </div>
</div>

Flexbox Report

CSS Flexbox Playground Report
============================
Direction: row
Wrap: wrap
Justify Content: flex-start
Align Items: stretch
Align Content: stretch
Gap: 12px
Padding: 12px
Items: 6

1. Item 1 | flex: 2 1 180px
2. Item 2 | flex: 1 1 140px
3. Item 3 | flex: 1 1 140px
4. Item 4 | flex: 1 1 180px
5. Item 5 | flex: 1 1 140px
6. Item 6 | flex: 1 1 140px

Caractéristiques

Contrôle total des conteneurs : ajustez les combinaisons de direction, d'habillage, d'espacement et d'alignement pour explorer le comportement pratique de mise en page flexible des cartes, des barres d'outils et des shells d'applications.
Contrôles flexibles par élément : ajustez flex-grow, flex-shrink et flex-basis pour chaque élément indépendamment afin de prototyper le comportement de distribution réel sous différentes contraintes de fenêtre d'affichage.
Aperçu visuel interactif : observez le rendu en direct lors de la modification des valeurs afin de pouvoir identifier rapidement les problèmes d'alignement, d'habillage et d'espacement avant de coder les composants finaux.
Extraits prêts à l'exportation : copiez les structures CSS et de balisage générées directement dans votre projet, réduisant ainsi les essais et les erreurs lors de la mise en œuvre des mises en page flexibles de production.

Cas d'utilisation

Barres de navigation : prototypez des modèles de navigation horizontaux et enveloppés avec un espacement et un alignement équilibrés avant de les intégrer dans les composants d'en-tête.
Panneaux de tableau de bord : créez des groupes de panneaux qui s'agrandissent et se réduisent de manière prévisible dans les tailles de fenêtre d'affichage en ajustant la base des éléments, les ratios de croissance et de réduction.
Listes de cartes : testez rapidement l'encapsulation des rangées de cartes et des piles verticales pour choisir la bonne direction et le bon comportement d'alignement pour les écrans riches en contenu.
Systèmes de présentation de formulaire : validez la façon dont les étiquettes, les entrées et les groupes d'actions s'alignent et s'enroulent sous les contraintes de largeur pour une ergonomie de formulaire cohérente.
Revues de conception : partagez des prototypes flexibles concrets lors des revues d'équipe et exportez immédiatement des extraits de code qui correspondent au comportement de mise en page approuvé.
Formation frontend : démontrez comment les propriétés flexibles interagissent en temps réel pour l'intégration, les ateliers et les sessions de débogage avec des développeurs juniors.

Pourquoi ça aide

Flexbox est puissant mais nécessite souvent des essais et des erreurs répétés sur plusieurs propriétés. Cet outil maintient les contrôles, l'aperçu et le code généré synchronisés pour une itération de mise en page plus rapide.

Du prototype à la production

Après avoir ajusté les valeurs, vous pouvez copier des extraits de code CSS et de balisage dans votre projet pour réduire le temps de mise en œuvre et préserver l'intention de mise en page.

Traitement local privé

Tout s'exécute localement dans le navigateur, sans téléchargement ni connexion, ce qui le rend fiable pour des expériences internes rapides et des flux de travail d'équipe.

Foire aux questions

Vous pouvez configurer flex-direction, flex-wrap, justification-content, align-items, align-content, gap et padding à partir du panneau de configuration.

Oui. Chaque élément prend en charge des valeurs indépendantes de flex-grow, flex-shrink et flex-basis afin que vous puissiez modéliser un comportement de distribution réaliste.

Oui. L'outil génère du CSS de conteneur ainsi que des extraits de balisage et un rapport supplémentaire pour la documentation ou le partage.

Oui. Vous pouvez ajouter dynamiquement des éléments ou supprimer le dernier pour tester différentes tailles de contenu et conditions d'emballage.

Oui. C'est gratuit, ne nécessite pas de connexion et s'exécute entièrement dans votre navigateur.

align-items contrôle l’alignement transversal des éléments sur une seule ligne. align-content contrôle l'espacement entre plusieurs lignes lorsque flex-wrap est activé et qu'il y a un espace supplémentaire sur l'axe transversal.

Non, c’est 100 % gratuit et aucune inscription n’est requise. Toute la génération de mise en page et le rendu d'aperçu se produisent côté client dans votre navigateur sans qu'aucune donnée ne soit envoyée à un serveur.