使用方法
CSS Flexbox 布局生成器的用法很简单，所见即所得，不写一行手敲代码也能拿到完整 flex 布局。
第一步：在「主轴方向」里选 row（水平排列）或 column（垂直排列）。第二步：在「主轴对齐」选 center，让子项在主轴居中；需要两端贴边就选 space-between。第三步：在「间距 gap」选 12px，子项之间留出统一空隙。第四步：设「子项数量」为 4，上方预览会立刻画出 4 个方块，下方生成对应的 CSS 代码，点「复制代码」就能贴进项目。改任意一项都会实时更新预览与代码。
能解决什么
这个 CSS Flexbox 布局生成器主要解决「调布局靠试错」的低效。第一，快速对齐：水平居中、垂直居中、两端分布这类经典需求，选一下就出代码，不用再背 justify-content 和 align-items 的取值。第二，处理换行：内容一行放不下时，用 flex-wrap 让子项自动折行，并用 align-content 控制多行的间距。第三，统一间距：用 gap 取代 margin 塌陷的老写法，子项之间留多大空隙一目了然。第四，产出可复制代码：把生成的 .box 规则直接贴进样式表，和团队现有的 CSS 变量、类名体系对接即可。
本页只生成容器级 flex 布局代码，不处理子项自身的 flex-grow/shrink 权重分配、不生成 Grid 网格代码、也不做响应式断点自动生成；这些请用下方的兄弟工具或相关链接分别处理。
原理和变量
CSS Flexbox 布局生成器遵循 W3C 的 CSS Flexible Box Layout Module Level 1，全部用浏览器原生渲染，不引入任何框架。
第一，容器设 display:flex 后，它的直接子元素变成「弹性项」，沿一条主轴排列，主轴方向由 flex-direction 决定（row 是水平、column 是垂直）。第二，justify-content 分配主轴上的剩余空间：flex-start 靠起点、center 居中、space-between 两端贴边中间均分、space-around/space-evenly 是不同均分策略，本质是对自由空间做不同比例的切分。第三，align-items 决定单行内子项在交叉轴上的对齐，stretch 会拉伸到容器高度。第四，gap 来自 CSS Box 模型的对齐规范，给相邻弹性项之间插入固定空隙，等价于过去用 margin 但不会出现首尾多余边距的写法。第五，多行时由 flex-wrap:wrap 触发，align-content 接管多行在交叉轴上的分布。
完整示例
用页面默认值演示，生成的代码与上方预览、下方对照表一致（数值仅作演示）。
选 row、center、gap 12px、子项 4 个，生成的规则是 display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:stretch; gap:12px;。预览里 4 个方块在主轴水平居中、交叉轴垂直居中、彼此间隔 12 像素。把 justify-content 改成 space-between，四个方块会分别贴到起点、终点和中间均分；把 gap 改成 24px，空隙会明显变大。
输入范围与对照表
每个 flex 属性都有固定的取值集合，不能随意填。下面是属性与取值对照表，前 12 行直接展开，点「加载更多」看剩余的简写属性；表格可导出 CSV、JSON，也能复制成制表符文本。
| 属性 | 可选值 | 作用 |
|---|---|---|
| flex-direction | row / row-reverse / column / column-reverse | 主轴方向，决定子项排列的主轴 |
| flex-wrap | nowrap / wrap / wrap-reverse | 是否换行，内容超出时如何折行 |
| justify-content | flex-start / flex-end / center / space-between / space-around / space-evenly | 主轴对齐，分配主轴上的剩余空间 |
| align-items | stretch / flex-start / flex-end / center / baseline | 交叉轴对齐，单行内子项的对齐 |
| align-content | stretch / flex-start / flex-end / center / space-between / space-around | 多行在交叉轴上的对齐，仅换行后生效 |
| gap | 0px / 4px / 8px / 12px / 16px / 24px | 子项间距，替代 margin 塌陷的经典写法 |
| flex-grow | 0 / 1 / 2 | 放大比例，剩余空间按此分配 |
| flex-shrink | 0 / 1 | 缩小比例，空间不足时按此收缩 |
| flex-basis | auto / 0 / 100px / 50% | 主轴基准尺寸，优先于 width/height |
| order | 0 / 1 / -1 | 排列次序，数值小的在前 |
| align-self | auto / flex-start / flex-end / center / stretch | 单行内单独覆盖 align-items |
| flex | 0 1 auto / 1 1 0 / 0 0 auto | grow shrink basis 的简写 |
| flex-flow | direction + wrap 的组合 | flex-direction 与 flex-wrap 的简写 |
| row-gap / column-gap | 同 gap 的档位 | 分别控制行间距与列间距 |
| place-content | align-content + justify-content | 两个对齐属性的简写 |
结果边界和舍入
CSS Flexbox 布局生成器的取值都是离散枚举，没有连续数值，所以谈不上四舍五入，但要注意几个边界。align-content 只有在 flex-wrap:wrap 产生多行时才生效，单行时改它没有任何效果，这是规范明确的行为而不是工具bug。stretch 对齐要求子项自身没有固定交叉轴尺寸，若子项写了固定高度，stretch 会被忽略。
gap 的取值建议用 4 的倍数（4/8/12/16/24），这是主流设计系统的间距档位，能保证视觉节奏一致；gap 不支持负值，也不支持百分比在旧浏览器里。子项数量限制 1 到 20，是为了预览不撑破页面，生成代码本身对子项数量没有上限。子项内容过长时会按 flex 规则压缩或换行，具体行为由各自 flex-shrink 决定，本工具不强制。
常见问题
为什么改了 align-content 没变化？
align-content 只在容器换行产生多行后才起作用。如果 flex-wrap 是 nowrap，子项永远一行，align-content 不起效；把它改成 wrap 再调即可看到效果。
水平和垂直居中要设哪两个？
主轴用 justify-content:center，交叉轴用 align-items:center。两者分别管不同方向，只设一个只能在一个方向上居中，这是 Flexbox 最常见的新手误区。
gap 和 margin 有什么区别？
gap 只在弹性项之间插入空隙，首尾不会多出边距，也不会出现 margin 塌陷；margin 需要手动处理首尾和负边距。新项目优先用 gap，代码更干净。
生成的代码能直接用吗？
可以直接用。本工具输出标准 flex 规则，复制后贴进你的样式表即可，但请按你项目的命名规范把 .box 改成实际类名，避免和其他样式冲突。
子项太多会换行吗？
取决于 flex-wrap：选 wrap 时一行放不下会折行，选 nowrap 时会压缩或溢出。需要稳定换行请选 wrap，并用 align-content 控制多行间距。
space-between 和 space-around 差在哪？
space-between 把剩余空间全部分配到项与项之间，首尾贴边；space-around 每项两侧都留一半空隙，所以首尾空隙是中间的一半；space-evenly 则所有空隙完全相等。
主轴方向影响对齐属性吗？
会影响。justify-content 永远管主轴、align-items 永远管交叉轴；当 flex-direction 从 row 改成 column，水平和垂直的含义互换，同一组取值的视觉效果也会跟着换方向。
结果能导出吗？
可以。「复制代码」复制生成的 CSS；对照表支持导出 CSV（带 BOM）、JSON（不带 BOM）以及复制制表符文本，方便整理取值清单。
相关工具
颜色选择器：给弹性项挑配色。 调色工具：生成协调的色板。 互补色颜色查询：查对比色。 邻近色颜色方案生成器：做邻近配色。 十六进制颜色表：查十六进制色值。 三角色颜色方案生成器：做三角配色。 Transparent 颜色计算器：算带透明度的颜色。