Ce guide vous explique comment identifier les éléments Flexbox sur une page, et comment inspecter et modifier les mises en page correspondantes dans le panneau Éléments.
Les captures d'écran figurant dans cet article proviennent de la page Web suivante: Centrer un élément textuel avec Flexbox.
Découvrir CSS Flexbox
Lorsque 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, le bouton flexbox editor (Éditeur flexible) s'affiche à 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é sont affichées 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: centeront été 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 apparaît sur l'élément, disposée en pointillés 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 sont contextuelles. Il change en fonction de la direction de la mise en page. Par exemple, lorsque vous remplacez flex-direction par column, les icônes de l'éditeur Flex sont pivotées en conséquence. La superposition est également mise à jour immédiatement.
Ajuster la couleur de la superposition Flexbox
Ouvrez le volet 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/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 située à 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électeur située à côté.