工具简介
Flexbox 布局生成器是工具派推出的一款可视化 CSS 布局辅助工具：不用死记 justify-content、align-items 这些属性的各种取值，只要在左侧点几下下拉框、填几个数字，右侧就能实时看到弹性盒子的排列效果，并自动生成可以直接粘贴到项目里的 CSS（以及配套 HTML）代码。工具覆盖容器五大属性调节、8 个常用布局预设、最多 12 个子项的独立参数编辑，全程在浏览器本地运行，打开即用、无需安装。
功能亮点
- 8 个快速预设：水平居中、两端对齐、垂直居中、等间距换行、右对齐、卡片网格、导航栏、侧边栏，一键套用常见布局方案。
- 容器属性全可调：
flex-direction、justify-content、align-items、flex-wrap、align-content五个下拉框覆盖主轴 / 交叉轴全部常用取值，另有gap、padding数值输入。 - 子项独立编辑：默认 3 个子项，最多可加到 12 个；每个子项可单独设置
flex-grow、flex-shrink、flex-basis、order、宽高、背景色和align-self。 - 实时可视化预览：右侧虚线框即 flex 容器，调参即刻生效；点击预览中的子项即可选中编辑，选中项带蓝色描边。
- 干净的代码输出：CSS 区实时生成
.container规则；只有改过参数的子项才会额外生成.item-N规则，避免冗余代码。 - 两种复制方式：「复制 CSS」只取样式，「复制 CSS+HTML」连示例结构一起带走。
参数说明
容器参数：
| 参数 | 说明 | 默认值 / 可选值 |
|---|---|---|
| flex-direction | 主轴方向 | row（默认）/ row-reverse / column / column-reverse |
| justify-content | 主轴对齐方式 | flex-start（默认）/ center / flex-end / space-between / space-around / space-evenly |
| align-items | 交叉轴对齐方式 | stretch（默认）/ flex-start / center / flex-end / baseline |
| flex-wrap | 是否换行 | nowrap（默认）/ wrap / wrap-reverse |
| align-content | 多行整体对齐（仅换行后生效） | stretch（默认）/ flex-start / center / flex-end / space-between / space-around / space-evenly |
| gap | 子项之间的间距 | 默认 8，范围 0–64px |
| padding | 容器内边距 | 默认 8，范围 0–64px |
子项参数（在「编辑子项」面板中对当前选中项设置）：
| 参数 | 说明 | 默认值 / 取值 |
|---|---|---|
| flex-grow | 伸展比例，瓜分容器剩余空间 | 默认 0，≥ 0 |
| flex-shrink | 收缩比例，空间不足时的缩小比例 | 默认 1，≥ 0 |
| flex-basis | 主轴方向的基准尺寸 | 默认 auto，可填 200px、30% 等 |
| order | 排列顺序，数值越小越靠前 | 默认 0，可为负数 |
| width / height | 固定宽高，留空表示不设置 | 默认空，如 120px、80px |
| 背景色 | 子项背景颜色 | 默认空；取色器或手动填写色值，如 #3b82f6、transparent |
| align-self | 单项交叉轴对齐，覆盖容器的 align-items | auto（默认）/ flex-start / center / flex-end / stretch / baseline |
使用步骤
- 打开工具页面：左侧为预设与参数调节区，右侧上方是实时预览、下方是生成的 CSS 代码，无需登录即可使用。
套用快速预设（可选）：直接点击「快速预设」中的方案——「水平居中」让子项在容器内水平垂直居中，「卡片网格」自动开启换行并加大间距，「导航栏」则是等间距横向排列，点一下就能看到效果。
微调容器参数：在五个下拉框中调整主轴方向与各轴对齐方式，用
gap、padding控制子项间距和容器内边距，预览区会实时刷新；调乱了点「重置」即可恢复默认。编辑子项：点「添加子项」最多加到 12 个，点子项标签上的「×」删除（至少保留 1 个）；在「子项列表」或预览区点击某个子项将其选中，然后在「编辑子项」面板中设置它的 grow / shrink / basis / order / 宽高 / 背景色 / align-self。
复制代码使用：确认预览效果后，在 CSS 代码区右上方点「复制 CSS」只复制样式，或点「复制 CSS+HTML」连示例结构一起复制，粘贴到项目中即可生效。
使用技巧
- 先预设后微调：8 个预设覆盖了日常大多数布局场景，先点最接近的预设，再改一两个参数，比从零开始调快得多。
- 等宽分列用 flex-grow：把所有子项的
flex-grow设为 1，子项会平分容器剩余空间，是等宽多列布局的常用写法。 - 固定侧栏 + 自适应主区：把侧栏子项的 width 设为固定值（如
240px）、主区子项flex-grow设为 1，就是经典两栏布局，也可以直接从预设「侧边栏」改起。 - 记得给子项加背景色：子项默认没有背景色，未选中的子项在预览里是白色文字，在白底容器上几乎看不见；设个背景色（如
#3b82f6）再观察布局会直观很多。 - 输出代码只含差异：保持全部默认值的子项不会生成 CSS 规则；只要有一个参数不是默认值（如
flex-grow ≠ 0、order ≠ 0，或填了宽度、背景色），该子项就会以.item-序号输出。 - 用 order 快速调序：不改 HTML 结构，把某个子项的
order设为 -1 即可提到最前面，适合快速验证排序方案。 - flex-basis 支持任意单位：可填
px、%、em、rem等，做响应式布局时用百分比更灵活。
常见问题
Q1：为什么预览里好像只看到一个子项？
默认子项没有背景色，未选中的子项显示为白色文字，在白底容器上看不清；只有被点击选中的子项才有蓝色描边和蓝色文字。给各子项设置背景色后即可全部看清。
Q2：align-items 和 align-content 有什么区别？align-items 控制子项在交叉轴上的对齐，单行也生效；align-content 只在 flex-wrap 为 wrap / wrap-reverse 且出现多行时，控制多行整体在交叉轴上的分布。单行布局下改 align-content 看不出任何效果。
Q3：复制的 CSS 里为什么没有某个子项的规则？
工具只为「被修改过」的子项生成 CSS：当子项的 grow、shrink、basis、align-self、order 全部为默认值，且没有设置宽高和背景色时，说明它不需要额外样式，自然不会输出。
Q4：gap 和 padding 有什么区别？gap 是子项与子项之间的间距，padding 是容器边缘与子项之间的内边距，两者取值范围都是 0–64px。
Q5：生成的 HTML 结构是什么样的？
「复制 CSS+HTML」会附带形如 <div class="container"><div class="item item-1">1</div>…</div> 的结构，类名与 CSS 中的 .item-N 一一对应，粘贴后即可直接运行。