Flexbox Labs

Flexbox Labs 是一个跑在浏览器里的布局实验台，专门用来摆弄 CSS 的 flexbox 和 CSS Grid。它把平时要手写代码、刷新页面才能看到的属性变化，变成一排控件：容器和子项分栏，Display、Flex Direction、Flex Wrap、Justify Content、Align Items、Align Content 逐项可选，Gap 用滑块调像素值。改一下，画面立刻跟着变。

主要功能

页面顶部有 Flexbox 和 Grids 两个入口，对应两套布局模型。flexbox 一侧把主轴方向、换行、主轴对齐、交叉轴对齐这些属性摊开成下拉菜单，间距用滑块控制，适合快速试出「这一组子项到底该怎么排」。Grids 部分同样以可视化方式调整网格布局。整个工具是纯前端页面，打开就能用，不需要装包或配置构建环境。

适合谁

刚学 flexbox、对 justify-content 和 align-items 的区别还犯迷糊的人，可以拿它当教具，一边拖控件一边看盒子怎么动。已经上手的前端开发者，在写布局前先在这里把参数试出来，再把值抄回样式表，也省去反复改代码刷新的时间。

费用与限制

项目在 GitHub 上开源，托管在 Netlify，免费使用。界面为英文，功能集中在布局参数调试，不涉及导出代码或保存项目之类的配套能力。页面加载时会先显示 Loading 状态，网络不佳时需要等一会儿。