✨Chrome DevTools 使用指☞北 - 元素面板之CSS布局 🔔CSS 网格布局 🌈 探索 CSS 网格

CSS 网格布局 🌈

如果您网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid，您可以在元素面板中看到该元素旁边有一个 grid 标记。
点击该标志可切换页面上网格叠加层的显示。叠加层显示在元素之上，布局像网格一样，显示其网格线和轨迹的位置：
打开布局窗格。如果页面上包含网格，“布局”窗格会包含一个 Grid 部分，其中包含许多用于查看这些网格的选项。

如需对齐网格项及其内容，请执行以下操作：

默认情况下，正负行号会显示在网格叠加层上。

显示行号。

选择隐藏行标签可隐藏行号。

隐藏线条标签。

您可以选择显示行名称来查看行名称（而非编号）。在本示例中，我们有四行名称：left、mid1、mid2 和 right。

在此演示中，orange 元素从左到右跨越，采用 CSS grid-column: left / right。显示线条名称可让您更轻松地直观地了解元素的起始位置和结束位置。

显示线路名称。

选中显示轨道大小复选框即可查看网格的轨道大小。

开发者工具会在每个行标签中显示 [authored size] - [computed size]：Authored 大小：样式表中定义的大小（如果未定义，则省略）。计算出的尺寸：屏幕上的实际尺寸。

在此演示中，snack-box 列大小在 CSS grid-template-columns:1fr 2fr; 中定义。因此，列行标签同时显示编写大小和计算大小：1fr - 96.66px 和 2fr - 193.32px。

行行标签仅显示计算后的大小：80px 和 80px，因为样式表中未定义行大小。

显示轨道大小。

要查看区域名称，请选中显示区域名称复选框。在此示例中，网格中有三个区域 - top、bottom1 和 bottom2。

显示区域名称。

选中延长网格线复选框，可沿着每个轴将网格线延伸至视口边缘。

延长网格线。

您可以启用多个网格的叠加视图。在此示例中，启用了两个网格叠加层 - main 和 div.snack-box，每个网格叠加层以不同的颜色表示。

启用多个网格的叠加视图。

您可以通过点击颜色选择器来自定义每种网格叠加层的颜色。

自定义网格叠加层的颜色

点击突出显示图标即可立即突出显示该 HTML 元素，然后在页面中滚动到该元素并在“元素”面板中将其选中。

突出显示网格

如果您网页上的某个 HTML 元素应用了 display: flex 或 display: inline-flex，那么您可以在 Elements 面板中该元素旁边看到 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 窗格中。