Stax

Terrain de Jeu CSS Flexbox

Expérimentez visuellement avec les propriétés Flexbox et copiez le CSS.

1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Qu'est-ce que le playground CSS Flexbox ?

Ce playground interactif est un endroit pour expérimenter visuellement avec propriétés flexbox. Voyez en direct display, justify-content, align-items, flex-direction et toutes propriétés — copiez le code CSS.

Comment utiliser le playground

  1. Ajustez propriétés du conteneur (justify-content, align-items).
  2. Ajoutez/retirez items.
  3. Essayez propriétés spécifiques d'item (flex-grow, align-self).
  4. Voir le résultat en direct.
  5. Copiez le code CSS final.

Propriétés clés flexbox

  • display: flex — créer conteneur
  • flex-direction — rangée ou colonne
  • justify-content — alignement axe principal
  • align-items — alignement axe croisé
  • flex-wrap — layouts multi-lignes

Questions fréquemment posées

Qu'est-ce que Flexbox ?
Flexbox est un module de layout CSS — organise items flexiblement en une seule dimension (rangée ou colonne). Le conteneur a display: flex; les items à l'intérieur s'alignent automatiquement. Parfait pour barres de navigation, layouts de cartes, centrage vertical.
Différence entre justify-content et align-items ?
Pour l'axe principal (horizontal par défaut) justify-content : flex-start, center, space-between, space-around. Pour l'axe croisé (vertical) align-items : flex-start, center, stretch, baseline. Tous deux essentiels pour alignement visuel.
Que sont flex grow, shrink, basis ?
flex-basis = taille initiale de l'item. flex-grow = comment l'espace supplémentaire se distribue (0 = fixé, 1 = part égale). flex-shrink = comment ça rétrécit en moins d'espace. Forme courte : flex: 1 1 auto = grow, shrink, basis.
Quand utiliser Flexbox vs Grid ?
Flexbox — layouts 1D (navbar, rangées de boutons, centrage vertical). Grid — 2D (layouts de page, grilles de cartes, dashboards). En designs modernes les deux s'utilisent ensemble. Apprenez les deux.

Outils associés