CSS 布局工作台
在同一个容器里切换 Flexbox 与 Grid，调容器与子项属性、看每个子项的 DevTools 式盒模型读数，即时预览并复制容器与子项的 CSS。
CSS 布局工作台
在同一个容器里切换 Flexbox 与 Grid，调容器与子项属性、看每个子项的 DevTools 式盒模型读数，即时预览并复制容器与子项的 CSS。
布局工作台怎么用
同一个容器，Flexbox 与 Grid 两种排法
在顶端切换模式，同一批子项就换另一种模型重排。Flexbox 管主轴与交叉轴；Grid 画出格线编号，让你把子项从第 1 条线放到第 3 条线。两种模式各自记住容器设置，可以来回比较同一个排版问题的两种答案。
每个子项都能展开盒模型
点一个子项并展开盒模型，会看到 DevTools 式同心图与实测的 content、border-box、margin-box 尺寸。改 padding、border、margin 或 box-sizing，布局立刻跟着动；CSS 输出里该子项的规则也带上同一组声明。
常见问题
关于这个主题的常见疑问与实用解答。
原本的 Flexbox 游乐场、Grid 游乐场与盒模型可视化去哪了？
它们就是这个工作台的两种模式与每个子项的盒模型面板。旧网址仍然可用，会直接开启对应模式；盒模型的旧网址会开启 flex 模式并展开第一个子项的盒模型。
为什么盒模型的尺寸是实测的，而不是自己输入？
在真实布局里，子项的大小来自容器、flex-basis 或 grid 轨道，不是你打的 width。实测渲染后的盒子正是 DevTools 的做法，也才看得出 box-sizing 如何改变 padding 与 border 对这个尺寸的影响。
会把数据传到服务器吗？
不会。预览、实测读数与 CSS 都在你的浏览器计算；没有账号、不上传、也不保存历史。