检查和调试 CSS flexbox 布局

本指南介绍了如何在网页上发现 Flexbox 元素,以及如何在 Elements 面板中检查和修改 Flexbox 布局。

本文中显示的屏幕截图来自此网页:使用 Flexbox 使文本元素居中

探索 CSS Flexbox

如果您网页上的某个 HTML 元素应用了 display: flexdisplay: inline-flex,那么您可以在 Elements 面板中该元素旁边看到 flex 标记。

探索 Flexbox

使用 Flexbox 编辑器修改布局

您可以使用 flexbox 编辑器,直观地修改 Flexbox 布局。例如,以下代码段展示了如何将此演示页面的文字 <h1> 置于容器 <div class="container"> 的中心。

  1. 检查容器元素。
  2. Styles 窗格中,您可以看到 display: flex 声明旁边有 flexbox 编辑器按钮。 Flexbox 编辑器按钮
  3. 点击它以打开 flexbox 编辑器。编辑器会显示 Flexbox 属性列表。每个属性的值选项均显示为图标按钮。 Flexbox 编辑器
  4. 如需将文本在屏幕上居中,您可以点击 justify-content: centeralign-items: center 按钮。 将文字居中放置在容器中
  5. 文本现在已居中。请注意,justify-content: centeralign-items: center 声明已添加到 Styles 窗格中。

检查 Flexbox 布局

您可以将鼠标悬停在 Elements 面板中的 Flexbox 元素上,以查看布局。叠加层显示在元素之上,用虚线显示其内容和项的位置。

将鼠标悬停在 Flexbox 元素上

或者,您也可以点击该标志来切换 Flexbox 叠加层的显示。

将 Justify-content 更改为 flex-end

请尝试将值更改为 justify-content: flex-end。叠加层也会随之更改。

Justify-content: flex-end

Flex 编辑器中的图标可感知情境。它将根据布局方向发生变化。例如,当您将 flex-direction 更改为 column 时,Flex 编辑器中的图标会相应地旋转。叠加层也会立即更新。

调整 Flexbox 叠加层颜色

打开布局窗格,然后向下滚动到 Flexbox 部分。您可以在此处查看该页面的所有 Flexbox 元素。

布局窗格

您可以使用每个 Flexbox 元素的旁边的复选框来切换其叠加层。这与您点击 DOM 树中的 badge 相同。

除此之外,您还可以通过点击叠加层旁边的颜色图标来更改叠加层的颜色。例如,container 叠加层的颜色会更改为黑色。

更改叠加层颜色

要导航到 DOM 树中的 flexbox 元素,可以点击该元素旁边的选择器图标。