Ce guide vous explique comment trouver les éléments flexbox sur une page, ainsi que comment inspecter et modifier les mises en page flexbox dans le panneau Éléments.
Les captures d'écran de cet article proviennent de la page Web Centrer un élément de texte avec Flexbox.
Découvrir Flexbox CSS
Lorsqu'un élément display: flex ou display: inline-flex est appliqué à un élément HTML de votre page, vous
un badge flex s'affiche à côté 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 É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 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 Éléments pour visualiser la mise en page. La superposition s'affiche au-dessus de l'élément, avec des lignes en pointillés pour indiquer la position de son contenu et de ses éléments.
Vous pouvez également cliquer sur le badge pour activer ou désactiver l'affichage de 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 sont contextuelles. 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 Mise en page, puis 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. C'est la même chose que lorsque vous cliquez 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 est remplacée par le noir.
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é.