In diesem Leitfaden erfahren Sie, wie Sie Flexbox-Elemente auf einer Seite erkennen sowie die Flexbox-Layouts im Steuerfeld Elemente prüfen und ändern.
Die Screenshots in diesem Artikel stammen von der Webseite Textelement mit Flexbox zentrieren.
CSS-Flexbox entdecken
Wenn auf ein HTML-Element auf Ihrer Seite display: flex oder display: inline-flex angewendet wurde, wird daneben im Steuerfeld Elemente ein flex-Symbol 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 im Container <div class="container"> zentrieren.
- Prüfen Sie das Containerelement.
- Im Bereich Styles wird neben der Deklaration
display: flexdie Schaltfläche Flexbox-Editor angezeigt.
- Klicken Sie darauf, um den Flexbox-Editor zu öffnen. Im Editor wird eine Liste mit Flexbox-Eigenschaften angezeigt. Die Wertoptionen jedes Attributs werden als Symbolschaltflächen angezeigt.
- Um den Text auf dem Bildschirm zu zentrieren, können Sie auf die Schaltflächen
justify-content: centerundalign-items: centerklicken.
- Der Text ist jetzt zentriert. Die Deklarationen
justify-content: centerundalign-items: centerwurden im Bereich Styles hinzugefügt.
Flexbox-Layout untersuchen
Bewegen Sie im Steuerfeld Elemente den Mauszeiger auf das Flexbox-Element, um das Layout zu visualisieren. Das Overlay wird über dem Element angezeigt und ist mit gepunkteten Linien angeordnet, um die Position des Inhalts und der Elemente darzustellen.
Alternativ können Sie auf das Badge klicken, um die Anzeige des Flexbox-Overlays umzuschalten.
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 zu column ändern, werden die Symbole im Flex-Editor entsprechend gedreht. Auch das Overlay wird 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 ansehen.
Sie können die Überlagerung der einzelnen Flexbox-Elemente mithilfe des Kontrollkästchens daneben aktivieren bzw. deaktivieren. Dies entspricht dem Klicken auf badge in der DOM-Baumstruktur.
Außerdem kannst du die Farbe des Overlays ändern, indem du auf das Farbsymbol daneben klickst. Die Farbe des container-Overlays wird beispielsweise in Schwarz geändert.
Um zu einem Flexbox-Element in der DOM-Struktur zu navigieren, klicken Sie auf das Auswahlsymbol daneben.