JC
space-between
Result
Boxes pushed to edges
设计配色
弹性盒子一维布局微调发生器
无需脑膜炎发作的查 MDN。直观拖拽选择 Flex direction 与 Justify Content 系列属性对抗。实时在右侧 Canvas 看到你的积木是如何排列、挤压或环绕堆叠的。包含 `gap` 测试。
DesignCSSLayout
快速切换:CSS Grid 生成
设计配色
Flexbox 可视化操作台
4 项
Flex 容器 row · nowrap
.container {
display: flex;
} 使用场景
- 尝试通过 Flex 进行复杂换行瀑布流或者定高等距排列，通过可视化面板调整直至完美贴合。
如何使用
- 选择主轴与侧轴的对齐规则即可，你可以即时添加方块看看多出来后 Flex 容器会作何反应。代码直接在最后拿走。
示例输入输出
FAQ
支持 Flex-basis 侧重点吗
当前工具着重演示容器端父级掌控流，Item 端暂时使用默认 flex: 0 0 auto。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS Grid 生成
CSS Grid 生成 - 行列轨道与间距
可视化设置行列数与间距，生成 display:grid 基础样式，适合后台布局、卡片栅格与等分轨道草稿，可直接复制到项目中调整。
CSS Grid 布局