Flexbox 试验场
在实时项目上试验 CSS Flexbox 属性，并复制生成的布局 CSS。
预览
点击某个项目进行编辑
生成的 CSS
—
所有处理都在你的浏览器中完成——不会上传任何内容。
容器
12px
项目
0
选中的项目
关于 Flexbox 试验场
Flexbox 弹性布局实验场是一个动手实践 CSS flexbox 的沙盒。设置容器属性——flex-direction、flex-wrap、justify-content、align-items、align-content 和 gap——并观察预览中最多 12 个实时元素随每次改动重新排列。这是理解每个属性实际作用的最快方式。
元素可单独编辑：点击一个元素选中它，然后调整其 flex-grow、flex-shrink、flex-basis、align-self 和 order。眼看一个元素扩展吞掉多余空间而其他兄弟元素保持原宽度，比看任何图解都更快让你理解弹性尺寸模型。
该实验场会为容器以及任何具有非默认设置的元素生成简洁的 CSS——直接复制到你的样式表即可。一切都在浏览器中运行，不会上传任何内容，重置按钮可让你恢复到初始状态。
如何使用 Flexbox 试验场
- 设置容器的 flex-direction、wrap、justify-content、align-items、align-content 和 gap。
- 添加或移除元素——数量在 2 到 12 个之间——以还原你的真实组件。
- 点击某个元素，调整其 grow、shrink、basis、align-self 和 order。
- 观察实时预览随每次改动更新。
- 复制生成的 CSS 并粘贴到你的项目中。
常见问题
flex-grow 分配剩余空间：grow 值为 2 的元素获得的额外空间是 grow 值为 1 的元素的两倍。空间不足时 flex-shrink 则反向起作用。两者都是兄弟元素之间的比例，而非绝对尺寸。
align-items 在交叉轴方向上定位同一行内的元素。align-content 用于在容器内分布多条换行后的行——只有当 flex-wrap 产生多于一行时才会有可见效果。
每个弹性元素默认 order 为 0；元素按 order 值从小到大排列。改变某个元素的 order 只会改变其视觉顺序，而不影响 HTML——DOM 顺序（以及屏幕阅读器读取顺序）保持不变。
可以。生成的 CSS 包含容器规则，以及为每个 grow、shrink、basis、align-self 或 order 与默认值不同的元素单独生成的选择器，因此你可以粘贴一份完整可用的布局代码。
是的——免费，无需注册，完全在客户端运行。你的实验内容永远不会离开浏览器标签页。
热门搜索
flexbox 试验场
css flexbox 生成器
flex 容器生成器
justify-content align-items 工具
css flex 布局生成器
flexbox 可视化工具
flexbox 代码生成器
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。