开发者工具提示：如何检查和调试 CSS flexbox

Sofia Emelianova

Chrome 开发者工具可直观地调试 CSS Flexbox 布局。元素面板为您提供了情境感知型 Flexbox 编辑器和可自定义的叠加层。

观看视频，了解如何：

• 使用 Flexbox 编辑器，只需点击按钮即可更改 Flexbox 属性，而无需输入这些属性。
• 切换视口中的 Flexbox 叠加层，即可立即查看所做的更改。
• 依次选择 Elements（元素）> Layout（布局）> Flexbox（弹性盒子），查看所有元素的列表并在 DOM 树中找到它们。此外，您还可以在此处自定义叠加层颜色。

如需详细了解 CSS flexbox 的一般用法，请参阅 Learn CSS > Flexbox。

如需在开发者工具中获得更实用的调试体验，请按照检查和调试 CSS Flexbox 布局教程操作。