马上默 在线轻量工具箱
登录

Flexbox 布局演练场

点选 flex-direction、justify-content、align-items、flex-wrap、gap，彩色积木实时演示排列变化，下方自动生成可复制的 Flex CSS，还能一键套用居中预设。

属性开关

flex-direction
justify-content
align-items
flex-wrap
gap：12px
子项数量：4

常用场景预设

子项 flex-grow 分配

选择子项并拖动滑杆设置 flex-grow（0~5），预览与 CSS 同步更新；grow 大于 0 时以 flex-basis:0 参与剩余空间分配。

0

主轴 / 交叉轴示意图（自绘 SVG）

方块位置由 flex-direction、justify-content、align-items 实时推算；虚线为交叉轴方向。

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。

最近方案 暂无

🧱口径说明与常见误填

分清主轴与交叉轴，Flex 就不会摆错位。

主轴方向
flex-direction 决定主轴：row 横向、column 纵向，reverse 反向；justify / align 两组属性的方向都跟着它变。
justify-content
沿主轴分配剩余空间：flex-start / center / flex-end / space-between / space-around / space-evenly 六种排法本页全可点选。
align-items
沿交叉轴对齐全部子项：stretch 默认拉伸，center 垂直居中（row 时），baseline 按文字基线对齐。
flex-wrap 与 gap
nowrap 时子项会被压缩；wrap 换行后 align-content 才生效。gap 只加在子项之间，最外圈不留空。
常见误区
只设 justify-content:center 就以为「居中」——那是主轴居中，垂直方向还要配 align-items:center，两个轴缺一不可。

这个工具解决什么问题

Flex 的属性名都眼熟，真到交叉轴、换行就懵。本页把 flex-direction、justify-content、align-items、flex-wrap、gap 做成可点开关，彩色积木舞台实时演示排列变化，下方同步生成完整 CSS，还能一键套用「水平居中 / 上下左右居中 / 两端对齐 / 右下角」预设，练出肌肉记忆。

三条练 Flex 铁律

① 先想主轴再选属性：justify 管主轴、align 管交叉轴；把 direction 切成 column 对比一次，两个轴互换的感觉就记住了。

② 压缩与换行二选一：nowrap 下空间不够子项会缩，wrap 下会折行；工具栏类布局多用 nowrap+min-width，卡片墙才用 wrap。

③ 用预设验证直觉：点「上下左右居中」预设，看代码区同时输出的两行属性——以后手写居中就不会只写一半。

怎么用

  1. 第 1 步 · 切换主轴方向
    点 flex-direction 的 row / column 等选项，积木舞台立即重排，先建立主轴概念。
  2. 第 2 步 · 点选对齐与换行
    逐个切换 justify-content、align-items、flex-wrap，观察同一组值在不同方向下的差异。
  3. 第 3 步 · 调 gap 与子项数量
    拖动两个滑杆改变间距与积木个数，模拟真实列表在极端数量下的表现。
  4. 第 4 步 · 套用预设并复制 CSS
    点常用场景预设一键组合属性，下方代码区实时输出 display:flex 完整规则，「复制 CSS」即用。

更新记录

  • v1.0 2026-11-02
  • 2026-11-02 上线首个版本
  • 2026-11-02 完善结果展示

常见问题

有 flex 布局在线演示工具吗？
本页就是：每个属性做成可点选开关，改动即时反映到积木舞台，并同步生成代码，适合建立肌肉记忆后再写真实页面。
justify-content 和 align-items 的区别？
前者沿主轴分配空间（direction 为 row 时是水平），后者沿交叉轴对齐（row 时是垂直）。把 direction 切成 column 再对比，两者方向会互换。
flex 居中写法有几种？
最经典的是 justify-content:center + align-items:center；也可用 margin:auto、place-content:center 或 Grid 一行实现。点「上下左右居中」预设可即时看到效果。
flex-basis 和 width 有什么区别？
flex-basis 是主轴方向的初始分配基准，会受 flex-grow/shrink 与换行影响；width 只是盒子宽度。direction 为 column 时，flex-basis 对应高度而 width 仍是宽度。
有弹性盒子布局生成器吗？
本页下方代码区即生成器输出：包含 display:flex 与全部所选属性，点「复制 CSS」直接进样式表，gap 与数量也会一并写入。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言，来抢沙发吧！

✍️ 说点什么
0 / 500
图形验证码

🔗 相关工具

🧮 CSS Grid 布局演练场二维布局接着练 Grid → 📦 盒模型可视化调试器flex 尺寸异常先查盒模型 → 📈 cubic-bezier 缓动生成器给布局切换加个顺滑动画 → 🧭 浏览器兼容性速查表查 flex 老浏览器的坑 →
👣 做完这一步，顺便看看
🏛️ 凯撒密码解密 凯撒密码解密 ：1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 ：把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具：粘贴或输入代码（支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具：输入前景文字色与背景色（支持 #he… →
全部工具 →