Ce guide vous explique comment détecter les éléments Flexbox sur une page, et inspecter et modifier les mises en page Flexbox dans le panneau Éléments.
Les captures d'écran présentées dans cet article proviennent de la page Web Centrer un élément textuel avec Flexbox.
Découvrir le format CSS flexbox
Lorsqu'un élément display: flex ou display: inline-flex est appliqué à un élément HTML de votre page, un badge flex s'affiche à côté de celui-ci dans le panneau Éléments.
Modifier les mises en page avec l'éditeur Flexbox
Vous pouvez modifier visuellement les mises en page Flexbox à l'aide de l'éditeur Flexbox. Par exemple, voici comment centrer le texte <h1> de cette page de démonstration dans son conteneur <div class="container">.
- Inspectez l'élément conteneur.
- Dans le volet Styles, vous pouvez voir le bouton de l'éditeur Flexbox à côté de la déclaration
display: flex. - Cliquez dessus pour ouvrir l'éditeur Flexbox. L'éditeur affiche une liste de propriétés du Flexbox. Les options de valeur de chaque propriété s'affichent sous forme de boutons en forme d'icône.
- Pour centrer le texte à l'écran, vous pouvez cliquer sur les boutons
justify-content: centeretalign-items: center. - Le texte est maintenant centré. Notez que les déclarations
justify-content: centeretalign-items: centersont ajoutées dans le volet Styles.
Examiner la mise en page Flexbox
Vous pouvez pointer sur l'élément Flexbox dans le panneau Elements (Éléments) pour visualiser la mise en page. La superposition apparaît sur l'élément, avec des lignes en pointillé pour indiquer la position de son contenu et de ses éléments.
Vous pouvez également cliquer sur le badge pour afficher ou masquer la superposition Flexbox.
Essayez de remplacer la valeur par justify-content: flex-end. La superposition est modifiée en conséquence.
Les icônes de l'éditeur Flex tiennent compte du contexte. Elle change en fonction de l'orientation de la mise en page. Par exemple, lorsque vous remplacez flex-direction par column, les icônes de l'éditeur flexible changent de rotation en conséquence. La superposition est également mise à jour immédiatement.
Ajuster la couleur de la superposition Flexbox
Ouvrez le volet Layout (Mise en page) et faites défiler la page jusqu'à la section Flexbox. Vous pouvez afficher tous les éléments Flexbox de la page ici.
Vous pouvez activer ou désactiver la superposition de chaque élément Flexbox à l'aide de la case à cocher correspondante. Cela revient à cliquer sur badge dans l'arborescence DOM.
Vous pouvez également modifier la couleur de la superposition en cliquant sur l'icône de couleur à côté. Par exemple, la couleur de la superposition container devient noire.
Pour accéder à un élément Flexbox dans l'arborescence DOM, vous pouvez cliquer sur l'icône de sélection située à côté.