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

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 ihres 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 den 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 Properties werden als Symbolschaltflächen angezeigt. Flexbox-Editor
  4. Wenn Sie den Text auf dem Bildschirm zentrieren möchten, klicken Sie auf die Schaltflächen justify-content: center und align-items: center. 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.

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.

Bewegen Sie den Mauszeiger auf ein Flexbox-Element.

Alternativ können Sie auf das Symbol klicken, um das Flexbox-Overlay ein- oder auszublenden.

Ä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 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.

Bereich „Layout“

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.

Overlay-Farbe ändern

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