Terrain de Jeu CSS Flexbox

Apprenez et expérimentez avec CSS Flexbox. Ajustez les propriétés du conteneur et observez la mise en page se mettre à jour en temps réel. Idéal pour comprendre Flexbox de manière interactive.

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Nombre d'éléments : 5

Aperçu

CSS

Fonctionnalités

Panneau des propriétés du conteneur

Ajouter ou retirer des éléments

Réglages par élément

Aperçu de la mise en page en direct

Génère le code CSS

Comment Utiliser

1. Ajustez les propriétés du conteneur (direction, wrap, justify-content, align-items).

2. Ajoutez ou supprimez des éléments flex.

3. Observez la mise en page se mettre à jour en direct et copiez le CSS.

À propos de cet outil

Flexbox dispose des éléments le long d'un axe — une ligne ou une colonne — et répartit l'espace entre eux. La difficulté, c'est que plusieurs propriétés interagissent : flex-direction définit l'axe principal, justify-content aligne les éléments le long de cet axe, align-items les aligne sur l'axe transversal, flex-wrap décide s'ils passent à la ligne et gap fixe un espacement régulier. Ce bac à sable vous laisse modifier chaque propriété et voir immédiatement comment des boîtes colorées se réorganisent : c'est le moyen le plus rapide de développer une intuition ou de déboguer une mise en page récalcitrante. Ajoutez ou retirez des éléments pour tester le retour à la ligne, puis copiez le CSS généré pour le conteneur. Pour les mises en page à deux dimensions, où lignes et colonnes doivent s'aligner, CSS Grid est généralement le meilleur outil.

Questions Fréquentes

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

justify-content répartit les éléments le long de l'axe principal défini par flex-direction, et align-items les positionne sur l'axe transversal. Dans une ligne, justify-content agit horizontalement et align-items verticalement ; dans une colonne, les rôles s'inversent.

Pourquoi justify-content semble-t-il sans effet ?

Il n'agit que s'il reste de l'espace libre sur l'axe principal. Si les éléments remplissent déjà le conteneur, par exemple parce qu'ils ont flex: 1 ou une grande largeur, il n'y a plus rien à répartir.

Quand utiliser gap plutôt que des marges ?

gap ajoute de l'espace uniquement entre les éléments, jamais sur les bords extérieurs, et fonctionne aussi bien sur une ligne qu'entre des lignes renvoyées. C'est plus simple et plus prévisible que des marges, et tous les navigateurs actuels le prennent en charge avec flexbox.

Que change flex-wrap ?

Avec nowrap, les éléments restent sur une seule ligne et rétrécissent si nécessaire. Avec wrap, ils passent sur des lignes supplémentaires quand la place manque, et wrap-reverse empile ces lignes dans le sens inverse.

Dois-je utiliser Flexbox ou Grid ?

Utilisez Flexbox pour les dispositions à une dimension, comme les barres de navigation, les groupes de boutons ou le centrage de contenu. Utilisez Grid quand les éléments doivent s'aligner à la fois en lignes et en colonnes, comme dans une galerie de cartes ou une structure de page.