Bac à sable Flexbox / Grid
Flexbox et Grid en direct
Modèles
Conteneur
align-content n'agit que lorsque les éléments passent à la ligne (flex-wrap: wrap).
Aperçu
Cliquez sur un élément pour régler ses propriétés. Agrandissez ou réduisez l'aperçu par son coin inférieur droit.
Les tailles minimales des éléments ne servent qu'à l'aperçu : elles ne sont pas dans le CSS.
Élément 1 sélectionné
Code
.container {
display: flex;
gap: 8px;
}À propos de l'outil
Ce bac à sable aide à comprendre et à régler une mise en page Flexbox ou CSS Grid sans aller-retour avec l'éditeur. En mode flex, vous changez flex-direction, flex-wrap, justify-content, align-items, align-content et gap. En mode grid, vous saisissez grid-template-columns et grid-template-rows, ou choisissez une valeur courante comme repeat(auto-fill, minmax(120px, 1fr)), puis réglez grid-auto-flow, justify-items et align-items.
Chaque élément, jusqu'à 12, se règle à part : flex-grow, flex-shrink, flex-basis, order et align-self en flex ; étendue en colonnes et en rangées ou lignes de début et de fin en grid. Six modèles servent de point de départ : centrage, barre de navigation, barre latérale, cartes responsives, Holy Grail et grille bento. Le CSS généré ne contient que les propriétés qui diffèrent des valeurs par défaut.
Comment l'utiliser
- Partez d'un des « Modèles » ou choisissez « Flexbox » ou « Grid » dans « Mode de mise en page ».
- Dans « Conteneur », réglez les propriétés d'alignement et l'« Espacement (gap) ».
- Cliquez sur « Ajouter un élément » si besoin, puis sur un élément de l'« Aperçu » pour régler ses propriétés.
- En grid, choisissez le « Placement » de l'élément : « Automatique », « Étendue (span) » ou « Lignes ».
- Cliquez sur « Copier le CSS ».
Questions fréquentes
Comment le CSS généré est-il organisé ?
Il contient une règle .container avec display: flex ou grid et les propriétés modifiées, puis une règle .item-1, .item-2, etc. pour chaque élément qui s'écarte des valeurs par défaut. Renommez ces sélecteurs pour les adapter à vos propres classes.
Pourquoi align-content n'a-t-il aucun effet ?
align-content répartit les lignes d'un conteneur flex. Il n'agit que lorsque les éléments passent à la ligne, avec flex-wrap: wrap ou wrap-reverse. Avec nowrap, l'outil le signale et n'ajoute pas la propriété au CSS généré.
Comment placer un élément sur plusieurs colonnes en grid ?
Sélectionnez l'élément, choisissez le placement « Étendue (span) » et indiquez le nombre de colonnes ou de rangées occupées. Le placement « Lignes » fixe plutôt les lignes de début et de fin : 0 vaut auto et -1 désigne la dernière ligne.
Les tailles des éléments de l'aperçu sont-elles dans le CSS ?
Non. Les éléments de l'aperçu ont des tailles minimales variées pour que l'effet des alignements reste visible, mais elles ne figurent pas dans le code copié. Vous pouvez aussi redimensionner la zone d'aperçu par son coin inférieur droit.