Tipps zu Entwicklertools: CSS-Flexbox prüfen und debuggen

Sofia Emelianova
Sofia Emelianova

Mit den Chrome-Entwicklertools ist das Debugging von CSS-Flexbox-Layouts intuitiv. Im Steuerfeld Elemente finden Sie einen kontextsensitiven Flexbox-Editor und ein anpassbares Overlay.

In diesem Video erfahren Sie, wie Sie

  • Mit dem Flexbox-Editor können Sie die Flexbox-Eigenschaften mit nur einem Klick ändern, anstatt sie einzugeben.
  • Sie können das Flexbox-Overlay im Darstellungsbereich ein-/ausblenden, um die Änderungen sofort zu sehen.
  • Unter Elemente > Layout > Flexbox finden Sie eine Liste aller Elemente, die Sie im DOM-Baum finden. Außerdem können Sie die Overlay-Farben hier anpassen.

Weitere Informationen zur CSS-Flexbox im Allgemeinen finden Sie unter CSS lernen > Flexbox.

Weitere praktische Informationen zur Fehlerbehebung in den Entwicklertools finden Sie in der Anleitung CSS-Flexbox-Layouts prüfen und debuggen.