Bac à sable CSS Flexbox
Espace interactif pour apprendre et générer des mises en page Flexbox
Paramètres de mise en page
Mises en page prédéfinies
Réglages individuels des éléments
Sélectionnez un élément dans l’aperçu ou la liste pour modifier ses propriétés.
Aide-mémoire Flexbox
Axe principal
justify-content contrôle l’alignement sur l’axe principal (déterminé par flex-direction).
Axe transversal
align-items contrôle l’alignement sur l’axe transversal (perpendiculaire à flex-direction).
Multiligne
align-content s’applique uniquement lorsque flex-wrap est défini sur wrap ou wrap-reverse avec plusieurs lignes.
Aperçu en direct
CSS généré
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Modifiez les paramètres ou sélectionnez un élément. L’aperçu et le CSS se mettent à jour ensemble.
À propos du bac à sable CSS Flexbox
Le bac à sable CSS Flexbox est un outil visuel et interactif pour apprendre et expérimenter les mises en page CSS Flexbox. Flexbox (Flexible Box Layout) est l'un des modules de mise en page CSS les plus puissants et les plus utilisés, conçu pour disposer des éléments dans un conteneur avec un comportement flexible et adaptatif. Cet outil vous permet de manipuler en temps réel chaque propriété du conteneur flex et des éléments flex, et de voir précisément comment votre mise en page évolue.
Fonctionnalités principales
- Contrôle complet de toutes les propriétés du conteneur flex : flex-direction, flex-wrap, justify-content, align-items, align-content et gap
- Réglages par élément : order, flex-grow, flex-shrink, flex-basis et align-self
- Aperçu visuel en direct avec éléments colorés et numérotés et un contour en pointillés pour le conteneur
- Mises en page prédéfinies, dont Barre de navigation, Grille de cartes, Holy Grail, Contenu centré et Mise en page avec barre latérale
- Code CSS généré automatiquement avec copie en un clic
- Réglage dynamique du nombre d'éléments, de 1 à 12
- Sélection des éléments par clic pour modifier leurs propriétés individuellement
- Prise en charge du mode sombre pour un usage confortable dans toutes les conditions d'éclairage
Comprendre les propriétés Flexbox
Flexbox fonctionne selon deux axes : l'axe principal (défini par flex-direction) et l'axe transversal (perpendiculaire à l'axe principal). La propriété justify-content répartit l'espace le long de l'axe principal, tandis qu'align-items gère l'alignement sur l'axe transversal. Lorsque flex-wrap autorise le retour à la ligne, align-content contrôle l'espacement entre ces lignes. Chaque élément flex peut remplacer son alignement avec align-self, contrôler ses ratios d'agrandissement et de réduction, et définir une taille de base avec flex-basis.
Modèles de mise en page Flexbox courants
Flexbox excelle pour créer des barres de navigation, centrer du contenu horizontalement et verticalement, construire des grilles de cartes qui s'adaptent au retour à la ligne, réaliser des mises en page avec une barre latérale fixe et un contenu principal fluide, et mettre en œuvre la mise en page classique Holy Grail avec en-tête, pied de page, barre latérale et zone de contenu principal. Utilisez les boutons de modèles pour voir immédiatement ces motifs en action.
À qui s'adresse cet outil ?
- Développeurs web qui découvrent CSS Flexbox
- Ingénieurs frontend qui prototypent rapidement des mises en page adaptatives
- Designers UI/UX qui veulent visualiser des mises en page flex avant d'écrire du code
- Étudiants qui travaillent les techniques de mise en page CSS pour leurs cours ou des entretiens
- Formateurs qui présentent les concepts de Flexbox en atelier ou en classe
- Toute personne qui a besoin de générer rapidement du CSS Flexbox pour ses projets