CSS-Flexbox-Layouts prüfen und debuggen

Jecelyn Yeen

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 dieser 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 ein flex-Logo neben dem Element 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.

1. Prüfen Sie das Containerelement.
2. Im Bereich Stile sehen Sie neben der Deklaration display: flex die Schaltfläche für den Flexbox-Editor.
3. Klicken Sie darauf, um den Flexbox-Editor zu öffnen. Im Editor wird eine Liste der Flexbox-Eigenschaften angezeigt. Die Wertoptionen der einzelnen Properties werden als Symbolschaltflächen angezeigt.
4. Mit den Schaltflächen justify-content: center und align-items: center lässt sich der Text auf dem Bildschirm zentrieren.
5. Der Text ist jetzt zentriert. Beachten Sie, dass die Deklarationen justify-content: center und align-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 und wird mit gepunkteten Linien dargestellt, um die Position seines Inhalts und seiner Elemente darzustellen.

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 kontextbezogen. 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 Bereich Flexbox. Hier können Sie alle Flexbox-Elemente der Seite anzeigen.

Sie können das Overlay jedes Flexbox-Elements über das Kästchen daneben ein- und ausblenden. 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. Beispiel: Die Farbe des container-Overlays wird in Schwarz geändert.

Wenn Sie zu einem Flexbox-Element in der DOM-Hierarchie wechseln möchten, klicken Sie auf das Auswahlsymbol daneben.