11.4 开发者工具调试flex布局

flex调试能够大大提高学习效率与调试效率，flex调试是flex学习的法宝。

（1）查看“flex”标记。查看元素面板，元素右侧显示“flex”标记。

（2）查看flex容器的调试线框。光标悬停元素面板的flex元素，页面显示flex布局结构的关键线框。

各列以紫色虚线框标记，右侧斜线阴影部分表示flex容器的剩余空间，也就是看到的空白部分，空白因为flex各列没有占满flex容器。

（3）固定显示flex容器的调试线框。

单击“flex”标记处于选中状态，flex容器的调试线框会一直显示。可以继续将光标悬停在其它flex子元素，同时查看flex子元素的调试线框。

同时显示flex容器与第1列两个元素的调试线框。flex子元素只有斜线表示没有发生收缩。

（4）“flexbox编辑器”调试

步骤1：样式面板display: flex属性的右侧图标“打开flexbox编辑器”。

单击弹出如下界面。

步骤2：直接选择属性与属性值调试设置属性。

例如justify-content默认值normal，当选中下方第4个值，上方对应显示“space-between”，样式面板会自动增加这个属性，页面效果自动更新。

（5）悬停属性。鼠标悬停在样式面板属性，页面通过框线显示该属性效果。

示例：显示排列属性的区域。鼠标悬停在justify-content属性，页面显示如下。

斜色紫线区域是justify-content: space-between设置产生的区域效果。

示例：查看对齐属性的对齐线。设置align-items: center，悬停在属性页面显示中线。

紫色水平线与箭头是align-items: center产生的对齐，形象表达了属性值的含义。

试一试。通过flexbox编辑器设置其它对齐属性，通过调试尽量理解各属性值的含义。