Tipps zu Entwicklertools: CSS-Flexbox prüfen und debuggen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Mit den Chrome DevTools können Sie CSS-Flexbox-Layouts ganz einfach debuggen. Im Bereich 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 Flexbox-Eigenschaften per Klick ändern, anstatt sie einzugeben.
- Aktivieren oder deaktivieren Sie das Flexbox-Overlay im Viewport, um die Änderungen sofort zu sehen.
- Im Bereich Elemente > Layout > Flexbox finden Sie eine Liste aller Elemente und können sie in der DOM-Hierarchie suchen. Außerdem können Sie hier die Overlay-Farben anpassen.
Weitere Informationen zu CSS Flexbox finden Sie unter CSS lernen > Flexbox.
Wenn Sie mehr über die Fehlerbehebung in den DevTools erfahren möchten, folgen Sie der Anleitung CSS-Flexbox-Layouts prüfen und beheben.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2022-09-01 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2022-09-01 (UTC)."],[],[],null,[]]
