In dieser Anleitung erfahren Sie, wie Sie Flexbox-Elemente auf einer Seite finden und die Flexbox-Layouts im Bereich Elemente prüfen und ändern.
Die Screenshots in diesem Artikel stammen von der Webseite Textelement mit Flexbox zentrieren.
CSS-Flexbox kennenlernen
Wenn auf ein HTML-Element auf Ihrer Seite display: flex
oder display: inline-flex
angewendet wird,
wird im Bereich Elemente das Badge flex
daneben angezeigt.
Layouts mit dem Flexbox-Editor ändern
Sie können Flexbox-Layouts mit dem Flexbox-Editor visuell ändern. So können Sie beispielsweise den Text <h1>
dieser Demoseite innerhalb ihres Containers <div class="container">
zentrieren:
- Prüfen Sie das Containerelement.
- Im Bereich Stile sehen Sie neben der Deklaration
display: flex
die Schaltfläche für den Flexbox-Editor. - Klicken Sie darauf, um den Flexbox-Editor zu öffnen. Der Editor zeigt eine Liste der Flexbox-Eigenschaften an. Die Wertoptionen der einzelnen Properties werden als Symbolschaltflächen angezeigt.
- Wenn Sie den Text auf dem Bildschirm zentrieren möchten, klicken Sie auf die Schaltflächen
justify-content: center
undalign-items: center
. - Der Text ist jetzt zentriert. Beachten Sie, dass die Deklarationen
justify-content: center
undalign-items: center
im Bereich Stile hinzugefügt werden.
Flexbox-Layout untersuchen
Bewegen Sie den Mauszeiger im Bereich Elemente auf das Flexbox-Element, um das Layout zu visualisieren. Das Overlay erscheint über dem -Element, dargestellt mit gepunkteten Linien, um die Position seines Inhalts und seiner Elemente anzuzeigen.
Alternativ können Sie auf das Symbol klicken, um das Flexbox-Overlay ein- oder auszublenden.
Versuchen Sie, den Wert in justify-content: flex-end
zu ändern. Das Overlay wird entsprechend geändert.
Die Symbole im Flex-Editor sind kontextsensitiv. Sie ändert sich entsprechend der Layoutrichtung. Wenn Sie beispielsweise flex-direction
in column
ändern, werden die Symbole im Flex-Editor entsprechend gedreht. Das Overlay wird ebenfalls sofort aktualisiert.
Flexbox-Overlay-Farbe anpassen
Öffnen Sie den Bereich Layout und scrollen Sie nach unten zum Abschnitt Flexbox. Hier können Sie alle Flexbox-Elemente der Seite anzeigen.
Sie können das Overlay jedes Flexbox-Elements mithilfe des Kontrollkästchens daneben aktivieren bzw. deaktivieren. Das entspricht dem Klicken auf das badge
im DOM-Baum.
Außerdem kannst du die Farbe des Overlays ändern, indem du auf das Farbsymbol daneben klickst. So wird beispielsweise die Farbe des Overlays container
zu Schwarz geändert.
Wenn Sie zu einem Flexbox-Element in der DOM-Hierarchie wechseln möchten, klicken Sie auf das Auswahlsymbol daneben.