Outil Développeur

Terrain de jeu CSS Flexbox

Apprenez et expérimentez le CSS Flexbox visuellement. Ajustez les propriétés du conteneur, voyez les éléments réagir en temps réel et copiez le CSS généré.

100% gratuit — aucun compte requis

Contrôles du conteneur
Contrôles des éléments

Élément 1

Élément 2

Élément 3

Aperçu
1
2
3
4
CSS généré
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Apprentissage visuel du Flexbox

Expérimentez les propriétés flex de manière interactive

Contrôles du conteneur

Direction, justify-content, align-items, wrap et gap — tous ajustables.

Aperçu en direct

Voyez les éléments flex colorés réagir à vos modifications en temps réel.

5 préréglages de mise en page

Mises en page centrée, barre de navigation, barre latérale, type grille et pied de page.

Copier le CSS

CSS généré pour le conteneur prêt à utiliser dans votre projet.

FAQ

Outils Développeur

Plus d'utilitaires CSS

Dégradé CSS, box shadow, convertisseur Tailwind et plus encore.