CSS Flexbox 查看器：检查Flexbox布局 - Firefox 开发者工具 编辑

Flexbox Inspector 让您通过Firefox DevTools深入的探索网页上使用CSS弹性盒子布局的元素。它能协助您发现网页上的每一个Flex容器，并更仔细的检查及修改运用Flex布局的元素，更轻易的调试布局问题等。

发现 Flex 容器

当您把 display: flex 套在网页上其中的某个HTML元素时，DevTools会显示一些协助开发者方便检查Flex布局的特点。

通过查看器面板

通过查看器面板，网页上每个运用 Flex布局的元素都会有一个flex标签：

点击flex标签会开启Flexbox覆盖。即使您把鼠标从容器移开，覆盖依然会现实在页面上。

通过提示框

当您把鼠标移到查看器中的任何元素时，元素上会出现提示框。提示框会告诉您关于此元素的更多信息。

以下的标头是个Flex容器:

每一个导航连接是个Flex项目:

以下的nav元素则同时是标头的Flex项目，以及导航连接的Flex容器：

通过 CSS 面板

CSS规则面板现实元素上的CSS声明。任何 display: flex 的声明会在 flex 字的左边加上一个Flexbox的小标图 。您可以点击这个标图开启Flexbox覆盖，显示与Flex项目相关的信息。

Flexbox覆盖会在每个Flex项目加上大纲:

即使您在查看器点击其它元素，覆盖依然会显示在页面上。当您修改相关的CSS属性值时，可以轻易的观察子元素的变化。

布局面板的弹性盒截面

布局面板有几个可折叠的截面，其中包括弹性盒截面。如果在选择Flex元素前把截面扩大，您只会看到选择一个弹性（Flex）容器或项目以继续的信息。当你选上运用Flex布局的元素时，弹性盒截面将会显示调查Flex容器或项目的一些选项。

Note: The Layout view can be found underneath the Layout tab on the right-hand pane of the Page Inspector. The above and below screenshots should give you further hints on how to get to this.

Flex容器选项

以下是Flex容器选项截面的截图：

从中可以调整两个设定：

• 元素选择器右边会显示一个小圆圈。点击小圆圈会启动选色工具，让您更改覆盖大纲的颜色。
• 您也可以利用截面的右边的开关控制覆盖的显示。

Flex项目属性

每个Flex项目会按编号排列，列表会显示元素的名字及类名。把鼠标移到其中任何项目上将会把它在网页上突出显示。

点击项目会显示关于Flex项目的细节。

这个视图显示关于Flex项目的以下信息：

• Flex项目尺寸的图解
• 内容尺寸 - 浏览器计算Flex项目尺寸的启发点（容器未应用约束前的尺寸）
• 弹性 - Flex项目伸展或者收缩的尺寸。当容器有多余的空间，伸展程度将依据 flex-grow值计算，当容器欠缺空间时，收缩程度将依据flex-shrink值计算。
• 最小尺寸（只会在项目进行最小尺寸钳位时出现）- 当容器欠缺空间时，Flex项目内容能收缩到的最小宽度
• 最终尺寸 - 浏览器依照各个布局属性值进行Flex项目宽度计算后的最终尺寸

截面的上方有个下拉列表，方便您选择容器中的任何Flex项目：