本指南将为您介绍如何发现页面上的 Flexbox 元素,以及如何在 Elements 面板中检查和修改 Flexbox 布局。
本文中显示的屏幕截图来自此网页:使用 Flexbox 居中显示文本元素。
探索 CSS Flexbox
当网页上的某个 HTML 元素应用了 display: flex
或 display: inline-flex
后,在元素面板中,您会在该元素旁边看到 flex
标志。
使用 Flexbox 编辑器修改布局
您可以使用 Flexbox 编辑器直观地修改 Flexbox 布局。例如,以下代码段展示了如何将此演示页面的文本 <h1>
在其容器 <div class="container">
内居中。
- 检查容器元素。
- 在 Styles 窗格中,您可以在
display: flex
声明旁边看到 flexbox 编辑器按钮。 - 点击该图标以打开 Flexbox 编辑器。编辑器将显示 Flexbox 属性列表。每个属性的值选项都显示为图标按钮。
- 如需让文本在屏幕上居中,您可以点击
justify-content: center
和align-items: center
按钮。 - 文本现已居中。请注意,
justify-content: center
和align-items: center
声明是在 Styles 窗格中添加的。
检查 Flexbox 布局
您可以在元素面板中将鼠标悬停在 Flexbox 元素上,以查看布局。叠加层会显示在该元素上方,并用虚线排列,以显示其内容和项的位置。
或者,您也可以点击该标志,切换 Flexbox 叠加层的显示。
请尝试将值更改为 justify-content: flex-end
。叠加层也会随之更改。
Flex 编辑器中的图标是情境感知图标。它会根据布局方向而变化。例如,当您将 flex-direction
更改为 column
时,Flex 编辑器中的图标也会相应地旋转。叠加层也会立即更新。
调整 Flexbox 叠加层颜色
打开 Layout 窗格,然后向下滚动到 Flexbox 部分。您可以在此处查看页面的所有 Flexbox 元素。
您可以切换每个 Flexbox 元素的叠加层的复选框。这与点击 DOM 树中的 badge
相同。
除此之外,您还可以点击叠加层旁边的颜色图标来更改叠加层的颜色。例如,container
叠加层的颜色会更改为黑色。
要导航到 DOM 树中的 Flexbox 元素,您可以点击该元素旁边的选择器图标。