谷歌浏览器开发者工具系列29:调试Grid和Flexbox属性

前言

Chrome Devtools为我们提供的flexboxgrid编辑器来实时预览这两个属性在界面上的布局分布状态。这对我们用来调试布局样式问题来说非常有用。

使用方式

  1. 使用Devtools检查带有flexgrid属性的元素。
  2. Style Pane中点击Open Grid/Flexbox Editor的图标(就是在display属性的右边);
  3. 选择对应的布局图标,用以下的形式来控制界面元素的样式:

– align-content: center / space-between / space-around / space-evenly / stretch
– justify-content: center / start / end / space-between / space-around / space-evenly
– align-items: center / start / end / stretch / baseline
– justify-items: center / start / end / stretch
4. 观察界面上元素布局的变化。

当你选择了一种模式的布局方式,Devtools会自动为你的代码插入相关样式代码。
css grid flexbox editor - 谷歌浏览器开发者工具系列29:调试Grid和Flexbox属性

更多特性

显示布局样式的方式还有另外几种,你可以在Elements 面板中选择display属性为grid的元素,然后点击它旁边的grid小图标。之后你就可以在界面- 上看到表格的一些基础信息以图像的形式展现出来,如:表格的边线,间距等信息。除次之外还有Layout面板,使用它可以自定义css表格的显示方式:
– 表格的边线(Grid lines)
– 表格的间距(Track sizes)
– 表格区域名称(Area names)
这个功能同样也适用于CSS Flexbox属性,你也可以用Flex属性来重复一遍上述的操作。

兼容性

Chrome 92 以及Chrome Canary 中可以使用这个功能。Flexbox编辑器已经是稳定版本了。

发表回复 0