Flexbox 拖拽布局编辑
在画布上添加盒子并设置容器/子项的 flex 属性，所有改动即时映射到代码面板
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 设置容器 flex-direction/justify-content/align-items
- 添加子项并配置 flex-grow/shrink/basis
- 拖拽子项调整顺序
- 复制生成的 CSS 规则
典型场景
学习 CSS Flexbox 时验证不同属性组合效果
调试响应式导航栏换行行为
写组件样式前确认 flex 布局方案
常见问题
支持嵌套 flex 容器吗？
可以在子项内部继续创建新 flex 容器。
能否导出完整 HTML 骨架？
可选输出包含容器和子项的 HTML+CSS 代码块。
有对齐辅助线吗？
拖拽时显示 margin 和 gap 的数值标注辅助对齐。