Chrome 开发者工具可直观地调试 CSS Flexbox 布局。元素面板为您提供了情境感知型 Flexbox 编辑器和可自定义的叠加层。
观看视频,了解如何:
- 使用 Flexbox 编辑器,只需点击按钮即可更改 Flexbox 属性,而无需输入这些属性。
- 切换视口中的 Flexbox 叠加层,即可立即查看所做的更改。
- 依次选择 Elements(元素)> Layout(布局)> Flexbox(弹性盒子),查看所有元素的列表并在 DOM 树中找到它们。此外,您还可以在此处自定义叠加层颜色。
如需详细了解 CSS flexbox 的一般用法,请参阅 Learn CSS > Flexbox。
如需在开发者工具中获得更实用的调试体验,请按照检查和调试 CSS Flexbox 布局教程操作。