CSS Flexbox 查看器:检查Flexbox布局

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

发现 Flex 容器

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

通过查看器面板

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

查看器板面显示flex标签

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

通过提示框

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

以下的标头是个Flex容器:

提示框显示Flex容器每一个导航连接是个Flex项目:

提示框显示Flex项目

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

提示框显示元素同时是Flex容器和Flex项目

通过 CSS 面板

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

规则面板

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

Flexbox覆盖

即使您在查看器点击其它元素,覆盖依然会显示在页面上。当您修改相关的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项目伸展或者收缩的尺寸。当容器有多余的空间,伸展程度将依据 flex-grow值计算,当容器欠缺空间时,收缩程度将依据flex-shrink值计算。
  • 最小尺寸(只会在项目进行最小尺寸钳位时出现)- 当容器欠缺空间时,Flex项目内容能收缩到的最小宽度
  • 最终尺寸 - 浏览器依照各个布局属性值进行Flex项目宽度计算后的最终尺寸

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

Flex项目下拉列表