Inspecteur de mise en page pour Flexbox et Grid

Chrome DevTools signale les conteneurs de mise en page flexible par un badge « flexible » à côté de leur nœud DOM dans le panneau Éléments. Cliquez sur le badge pour activer ou désactiver la superposition de mise en page flexible — des lignes colorées indiquant l’axe principal, l’axe transversal, les limites des éléments et l’espacement des intervalles.

Les conteneurs de grille affichent un badge « grille ». Cliquez dessus pour activer ou désactiver la superposition de grille : des lignes colorées pour les colonnes, les lignes et les intervalles. Les superpositions persistantes (épinglées dans le panneau Mise en page) restent visibles lorsque vous faites défiler ou redimensionnez la fenêtre d’affichage.

DevTools → Éléments → l’onglet Mise en page répertorie tous les conteneurs de mise en page flexible et de grille de la page. Cliquez sur le nom d’un conteneur pour le sélectionner dans le DOM et activer ou désactiver sa superposition. L’apparence de la superposition (couleur des lignes, visibilité des libellés, tailles des pistes) se configure ici.

La superposition affiche les noms et les tailles des pistes lorsque « Afficher les tailles des pistes » est activé. Les tailles intrinsèques (automatique, contenu minimal, contenu maximal) et les unités fractionnelles affichent leurs valeurs résolues en pixels — ce qui révèle comment les unités fractionnelles se partagent l’espace disponible.

Sélectionnez un élément flex (enfant d’un conteneur flex). Le panneau Styles affiche le développement de la notation abrégée flex — croissance, rétrécissement et base. La surcouche met en évidence la taille de l’élément sur l’axe principal, sa base, ainsi que toute croissance ou réduction appliquée.

Les conteneurs de grille utilisant grid-template-areas affichent des surcouches pour les zones nommées. Chaque région nommée est étiquetée et distinguée par une couleur. Cette représentation permet de vérifier facilement que les affectations de zones de grille correspondent au modèle de mise en page prévu.

La prise en charge des sous-grilles dans DevTools distingue clairement les conteneurs de sous-grille. Leurs lignes de piste s’alignent sur celles de la grille parente — la surcouche montre visuellement cet alignement et confirme que les éléments de la sous-grille participent au système de coordonnées de la grille parente.

Les éléments mal alignés résultent souvent de valeurs incorrectes pour la justification du contenu, l’alignement des éléments ou l’auto-alignement. La surcouche flex/grille affiche la position des éléments par rapport aux lignes des axes. Essayez d’activer ou de désactiver les propriétés d’alignement dans le panneau Styles et observez les changements de la surcouche en temps réel.

La surcouche représente l’espace entre les éléments sous forme de bandes colorées. Vous pouvez ainsi vérifier facilement les valeurs d’espacement et déterminer si l’espace provient de l’espacement entre éléments (correct) ou de la marge (qui peut se réduire de manière inattendue dans les lignes flex).

La surcouche de grille distingue les pistes implicites (créées automatiquement pour les éléments qui débordent) des pistes explicites (définies dans le modèle de grille). Des lignes en pointillés marquent les pistes implicites. Si le contenu crée des pistes implicites inattendues, la surcouche révèle immédiatement le schéma de débordement.

Combinez l’inspecteur de mise en page avec le mode Appareil. Redimensionnez la fenêtre d’affichage et observez en temps réel la redistribution des éléments lorsque les lignes flex se réorganisent et que les pistes de grille sont remplies ou ajustées automatiquement. Cette méthode détecte les ruptures de mise en page adaptative plus tôt qu’un redimensionnement manuel de la fenêtre du navigateur.

Que montre la surcouche de grille de DevTools qui n’est pas visible sur la page rendue ?

L’inspecteur de mise en page Flexbox et Grid de DevTools représente les lignes des axes, les dimensions des pistes, les espacements, les zones nommées et les pistes implicites sous forme de surcouches interactives. Associé au panneau Mise en page pour gérer les surcouches, il rend le débogage des mises en page CSS complexes plus rapide et intuitif que la simple lecture du CSS.