# Flexbox 布局生成器使用教程：可视化调参，一键复制弹性布局 CSS

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/flexbox-generator-guide

## 工具简介

**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` |

## 使用步骤

1. **打开工具页面**：左侧为预设与参数调节区，右侧上方是实时预览、下方是生成的 CSS 代码，无需登录即可使用。

![Flexbox 布局生成器主界面：左侧为快速预设按钮、容器属性下拉框（flex-direction、justify-co](article/202607/1783967158330_3422.png)

2. **套用快速预设（可选）**：直接点击「快速预设」中的方案——「水平居中」让子项在容器内水平垂直居中，「卡片网格」自动开启换行并加大间距，「导航栏」则是等间距横向排列，点一下就能看到效果。

3. **微调容器参数**：在五个下拉框中调整主轴方向与各轴对齐方式，用 `gap`、`padding` 控制子项间距和容器内边距，预览区会实时刷新；调乱了点「重置」即可恢复默认。

4. **编辑子项**：点「添加子项」最多加到 12 个，点子项标签上的「×」删除（至少保留 1 个）；在「子项列表」或预览区点击某个子项将其选中，然后在「编辑子项」面板中设置它的 grow / shrink / basis / order / 宽高 / 背景色 / align-self。

5. **复制代码使用**：确认预览效果后，在 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` 一一对应，粘贴后即可直接运行。