Développeur

Terrain de jeu CSS Flexbox gratuit

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

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;
}

Fonctionnalités de Terrain de jeu CSS Flexbox gratuit

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.

Copier le CSS

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

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.

Aperçu en direct

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

FAQ

Quand utiliser Flexbox vs Grid ?

Flexbox est idéal pour les mises en page unidimensionnelles (lignes OU colonnes). Grid est pour les mises en page bidimensionnelles (lignes ET colonnes). Beaucoup de mises en page utilisent les deux.

Que fait flex-wrap ?

Par défaut, les éléments flex restent sur une ligne et rétrécissent. flex-wrap: wrap permet aux éléments de passer à la ligne suivante quand ils ne tiennent pas.

Quelle est la différence entre justify-content et align-items ?

justify-content aligne les éléments le long de l'axe principal (horizontal en row, vertical en column). align-items aligne le long de l'axe transversal (perpendiculaire).

Vous aimez nos outils gratuits ?

Plus d'utilitaires CSS

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

Voir tous les outils