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


## 工具简介

**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` 一一对应，粘贴后即可直接运行。


免费在线 Flexbox 布局生成器，可视化调节 flex-direction、justify-content、align-items 等容器属性和子项的 grow、shrink、basis，内置水平居中、卡片网格、导航栏等 8 种预设，实时预览，一键复制 CSS 或 CSS+HTML。

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