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 Steuerfeld Elemente untersuchen und ändern können.

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 im Bereich Elemente daneben das Logo flex angezeigt.

Flexbox entdecken

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 des Containers <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. Schaltfläche für Flexbox-Editor
  3. Klicken Sie darauf, um den Flexbox-Editor zu öffnen. Der Editor zeigt eine Liste der Flexbox-Eigenschaften an. Die Wertoptionen der einzelnen Eigenschaften werden als Symbolschaltflächen angezeigt. Flexbox-Editor
  4. Mit den Schaltflächen justify-content: center und align-items: center lässt sich der Text auf dem Bildschirm zentrieren. Text im Container 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.

Das 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 anzuzeigen.

Bewegen Sie den Mauszeiger auf ein Flexbox-Element

Alternativ können Sie auf das Badge klicken, um die Anzeige des Flexbox-Overlays ein- oder auszuschalten.

Ändern Sie „Justify-Content“ in „Flex-End“.

Versuchen Sie, den Wert in justify-content: flex-end zu ändern. Das Overlay wird entsprechend geändert.

Blocksatz: Flex-end

Die Symbole im Flex-Editor sind kontextsensitiv. Sie ändert sich entsprechend der Layout-Richtung. 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.

Layoutbereich

Sie können das Overlay jedes Flexbox-Elements mithilfe des Kontrollkästchens daneben aktivieren bzw. deaktivieren. Dies entspricht dem Klicken auf das badge in der DOM-Baumstruktur.

Außerdem können Sie die Farbe des Overlays ändern, indem Sie auf das Farbsymbol daneben klicken. So wird beispielsweise die Farbe des Overlays container zu Schwarz geändert.

Overlay-Farbe ändern

Um zu einem Flexbox-Element in der DOM-Struktur zu navigieren, klicken Sie auf das Auswahlsymbol daneben.