CSS Flexbox playground

Cliquez sur les propriétés Flexbox et regardez les blocs se réorganiser en temps réel — puis copiez le CSS du conteneur. Un moyen rapide d'apprendre flex et d'obtenir le code exact. Rien n'est envoyé nulle part.

flex-direction

justify-content

align-items

flex-wrap

Espacement12px

Nombre d'éléments5

Aperçu en direct

CSS du conteneur

Tout fonctionne dans votre navigateur. Aucun envoi, aucune inscription.

Comment ça marche

STEP 1

Choisissez vos propriétés

Appuyez sur flex-direction, justify-content, align-items et wrap. Faites glisser l'espacement et le nombre d'éléments.

STEP 2

Observez l'aperçu en direct

Les blocs se réorganisent instantanément pour que vous voyiez exactement ce que fait chaque propriété Flexbox.

STEP 3

Copiez le CSS

Obtenez le CSS propre du conteneur en un clic, ou téléchargez un fichier .css — rien n'est envoyé.