JC
space-between
Result
Boxes pushed to edges
design / 可用工具
弹性盒子一维布局微调发生器
无需脑膜炎发作的查 MDN。直观拖拽选择 Flex direction 与 Justify Content 系列属性对抗。实时在右侧 Canvas 看到你的积木是如何排列、挤压或环绕堆叠的。包含 `gap` 测试。
DesignCSSLayout
快速切换： CSS Grid 二维栅格引擎
设计与布局
Flexbox 可视化操作台
Flex Container
CSS Output
.container {
display: flex;
} 使用场景
- 尝试通过 Flex 进行复杂换行瀑布流或者定高等距排列，通过可视化面板调整直至完美贴合。
如何使用
- 1. 选择主轴与侧轴的对齐规则即可，你可以即时添加方块看看多出来后 Flex 容器会作何反应。代码直接在最后拿走。
示例输入输出
FAQ
支持 Flex-basis 侧重点吗
当前工具着重演示容器端父级掌控流，Item 端暂时使用默认 flex: 0 0 auto。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS Grid 二维栅格引擎
现代响应式网格轨道分割器
用最粗暴直白的方式划分横竖行列，并设置沟槽（Gap）。迅速拿到能够直接构建如管理后台 Layout 或电商橱窗画廊的 `display: grid` 参数。自带 Holy Grail 三栏布局等快速挡位。
Design CSS Layout