Developer Tools
Web UtilitiesAire de jeu CSS Flexbox
Configurez visuellement les propriétés du conteneur et des éléments CSS flexbox avec un aperçu en direct. Générez du code CSS prêt à l'emploi pour flex-direction, justify-content, align-items et plus encore.
Préréglages
Propriétés du Conteneur
Propriétés de l'Élément
Aperçu en Direct
1
2
3
CSS du Conteneur
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}CSS des Éléments
.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}Outils Connexes
À propos de l'Aire de jeu CSS Flexbox
Comment ça marche
- Ajustez les propriétés du conteneur comme flex-direction, flex-wrap, justify-content, align-items et align-content
- Ajoutez jusqu'à 6 éléments flex et configurez chacun indépendamment avec flex-grow, flex-shrink, flex-basis, align-self et order
- Prévisualisez votre mise en page en temps réel lors de la modification des propriétés
- Copiez le CSS généré du conteneur et des éléments directement dans votre projet
- Utilisez les préréglages pour explorer rapidement les modèles flexbox courants
Cas d'Usage Courants
- Apprendre les propriétés de mise en page flexbox de manière interactive
- Prototyper des barres de navigation, des grilles de cartes et des barres latérales
- Déboguer des problèmes d'alignement flexbox complexes
- Générer du CSS de base pour des modèles de mise en page courants
- Enseigner les concepts CSS flexbox aux étudiants
Questions Fréquemment Posées
Qu'est-ce que l'Aire de jeu CSS Flexbox ?
L'Aire de jeu CSS Flexbox est un outil interactif qui vous permet de configurer visuellement toutes les propriétés du conteneur et des éléments flexbox. Les modifications apparaissent instantanément dans un aperçu en direct et le code CSS prêt à l'emploi est généré automatiquement.
Quelles propriétés du conteneur puis-je configurer ?
Vous pouvez configurer les six propriétés principales du conteneur flex : flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around) et gap (valeur en pixels).
Quelles propriétés puis-je configurer par élément flex ?
Chaque élément flex peut être configuré avec : flex-grow (l'espace supplémentaire pris par l'élément), flex-shrink (l'espace réductible quand l'espace est limité), flex-basis (la taille initiale), align-self (remplacement d'alignement individuel) et order (ordre visuel dans le conteneur).
Combien d'éléments flex puis-je ajouter ?
Vous pouvez ajouter jusqu'à 6 éléments flex. Cliquez sur le bouton '+ Ajouter un élément' pour en ajouter davantage. Chaque élément est codé par couleur pour une identification facile dans l'aperçu et le panneau de configuration.
Comment sélectionner et modifier un élément flex spécifique ?
Cliquez sur n'importe quel onglet numéroté en haut du panneau Propriétés de l'élément pour le sélectionner. Vous pouvez également cliquer directement sur un élément dans l'aperçu en direct. L'élément sélectionné sera mis en évidence avec une bordure colorée.
Que sont les préréglages et comment les utiliser ?
Les préréglages sont des configurations flexbox prêtes à l'emploi pour les modèles de mise en page courants : 'Ligne centrée' centre les éléments horizontalement et verticalement, 'Colonne centrée' empile les éléments verticalement et les centre, 'Espace entre' distribue les éléments uniformément, 'Grille avec retour à la ligne' utilise flex-wrap, 'Éléments étirés' utilise flex-grow, 'Ligne inversée' inverse l'ordre d'affichage. Cliquez sur un préréglage pour l'appliquer instantanément.
Que fait flex-grow ?
flex-grow définit la croissance d'un élément flex par rapport aux autres éléments quand il y a de l'espace supplémentaire dans le conteneur. Une valeur de 0 signifie que l'élément ne croîtra pas. Une valeur de 1 signifie qu'il prend une part égale de l'espace supplémentaire. Une valeur de 2 signifie qu'il prend deux fois plus d'espace qu'un élément avec flex-grow: 1.
Que fait flex-shrink ?
flex-shrink définit le rétrécissement d'un élément flex par rapport aux autres éléments quand l'espace est insuffisant. Une valeur de 0 empêche le rétrécissement. Une valeur de 1 (par défaut) signifie un rétrécissement proportionnel. Une valeur de 2 signifie un rétrécissement deux fois plus rapide.
Quelles valeurs flex-basis peut-il accepter ?
flex-basis définit la taille initiale d'un élément flex avant la distribution de l'espace libre. Il accepte : 'auto' (utilise la largeur ou la hauteur de l'élément), une valeur de longueur comme '100px' ou '20%', 'content' (basé sur le contenu) ou '0' (l'élément commence à taille zéro).
Quelle est la différence entre align-items et align-self ?
align-items est une propriété du conteneur qui s'applique à tous les éléments flex par défaut. align-self remplace align-items pour un élément individuel. Par exemple, si le conteneur a align-items: center mais qu'un élément a align-self: flex-end, tous les éléments seront centrés sauf cet élément.
Que fait la propriété order ?
La propriété order contrôle l'ordre visuel des éléments flex sans modifier l'ordre du DOM. Les éléments avec une valeur d'order plus faible apparaissent en premier. La valeur par défaut est 0.
Comment copier le CSS généré ?
Il y a deux boutons de copie : un pour le CSS du conteneur et un pour tout le CSS. Cliquez sur n'importe quel bouton 'Copier CSS' pour copier le code dans votre presse-papiers.