# Flexbox 与 Grid 布局生成器 - 可视化调试，生成 CSS 与 Tailwind

> 在线 Flexbox 与 CSS Grid 演练场：实时调整容器与子项属性，拖动框选命名 grid-template-areas，生成 CSS、HTML 和 Tailwind 类名，内置圣杯布局等预设。

- 网址: https://qilingtools.com/zh/flex-grid
- 分类: 开发工具 (https://qilingtools.com/zh/dev)
- 标签: [学习教育](https://qilingtools.com/zh/tags/education), [开发](https://qilingtools.com/zh/tags/dev), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

justify-content 和 align-items 到底谁管哪个方向？flex: 1 和 flex-grow: 1 有什么区别？repeat(auto-fill, minmax()) 会排出几列？与其反复刷新页面试错，不如在这里直接看效果。Flexbox 模式可以调整 flex-direction、flex-wrap、justify-content、align-items、align-content 和行列间距，点击预览中的任意子项还能单独设置 flex-grow、flex-shrink、flex-basis、order 和 align-self；Grid 模式可以输入任意 grid-template-columns / rows（fr、minmax、repeat、auto-fill、auto-fit 都能用），设置 justify/align 的 items 与 content、grid-auto-flow（含 dense），并为每个子项指定 grid-column、grid-row 或区域名。区域编辑器支持在格子上按住拖动框选，把一块矩形命名为 header、sidebar 等，自动生成对齐排版的 grid-template-areas，并检查区域是否为矩形、列数是否与模板一致。可以调整子项数量、容器宽高和内容长短来观察换行与对齐。结果同时给出 CSS、HTML 和 Tailwind CSS 类名（能用标准类就用标准类，其余用任意值写法）。内置水平垂直居中、导航栏、等分列、换行卡片、圣杯布局、侧边栏、自适应卡片网格和仪表盘预设。

## 使用步骤

1. 选择 Flexbox 或 Grid，或从预设开始（圣杯布局、侧边栏、卡片网格等）
2. 调整容器属性，点击预览中的子项单独设置；Grid 可开启区域并拖动框选命名
3. 在 CSS、HTML、Tailwind 三个标签页之间切换，复制生成的代码

## 功能特点

- Flexbox 容器与子项全部常用属性实时预览
- Grid 模板支持 fr、minmax、repeat、auto-fill / auto-fit
- 拖动框选命名 grid-template-areas，自动对齐并校验矩形
- 子项 grid-column / grid-row / grid-area 精确放置
- 同时生成 CSS、HTML 与 Tailwind 类名
- 8 个常用布局预设
- 可调子项数量、容器宽高与内容长短
- 纯前端运行，即改即看

## 常见问题

### justify-content 和 align-items 分别控制哪个方向？

在 Flexbox 中，justify-content 控制主轴方向的分布，align-items 控制交叉轴方向的对齐。主轴由 flex-direction 决定：row 时主轴是水平方向，column 时主轴变成垂直方向，两个属性的效果也会随之互换。align-content 只在 flex-wrap 换行、出现多行时才起作用。在 Grid 中，justify-* 永远是水平（行内）方向，align-* 永远是垂直（块）方向。

### flex: 1 是什么意思？和 flex-grow: 1 一样吗？

flex: 1 是 flex: 1 1 0% 的简写，即可以放大、可以缩小、基础尺寸为 0，所以几个 flex: 1 的子项会严格等分剩余空间，不受内容长短影响。只写 flex-grow: 1 时 flex-basis 仍是 auto，子项先按内容宽度占位，再平分剩下的空间，内容多的子项会更宽。在演练场里切换两种写法就能直观看到区别。

### auto-fill 和 auto-fit 有什么区别？

两者都会在一行里放下尽可能多的轨道。区别在于子项不够填满一行时：auto-fill 会保留空的轨道，子项保持 minmax 的最小宽度附近；auto-fit 会把空轨道折叠成 0，让已有子项拉伸占满整行。卡片列表通常用 repeat(auto-fill, minmax(200px, 1fr))。

### 为什么我的 grid-template-areas 没有生效？

常见原因有三个：每个区域名必须组成一个矩形，不能是 L 形或分成两块；每一行的格子数必须相同；子项需要用 grid-area 指定同名区域。只要有一处不合法，浏览器就会忽略整个 grid-template-areas。区域编辑器会标出不是矩形的区域，并在区域列数与 grid-template-columns 不一致时给出提示。

## 相关工具

- [JSON 格式化](https://qilingtools.com/zh/json): 免费在线 JSON 格式化：一键美化、压缩，实时语法校验并定位到出错行列，支持树形视图折叠、键名排序、转义与去转义、Unicode 转中文、复制下载，数据不上传。
- [Base64 编解码](https://qilingtools.com/zh/base64): 免费在线 Base64 编码解码工具：支持中文 UTF-8、URL 安全变体，文本与 Base64 互转，实时转换，本地处理不上传。
- [URL 编解码](https://qilingtools.com/zh/url-encode): 免费在线 URL 编码解码工具：encodeURIComponent 与 encodeURI 两种模式，处理中文、空格与特殊符号，本地实时转换不上传。
- [JWT 解析](https://qilingtools.com/zh/jwt): 免费在线 JWT 解析工具：解码 JWT 的 Header 与 Payload，展示过期时间、签发时间等，本地解析不上传，保护令牌安全。
- [时间戳转换](https://qilingtools.com/zh/timestamp): 免费在线 Unix 时间戳转换工具：时间戳与日期互转，自动识别秒/毫秒，显示本地时间、UTC、ISO 8601 和相对时间，实时更新。
- [哈希计算](https://qilingtools.com/zh/hash): 免费在线哈希/摘要计算工具：对文本或文件计算 SHA-1、SHA-256、SHA-384、SHA-512，使用浏览器加密接口本地完成，文件不上传。
- [UUID 生成](https://qilingtools.com/zh/uuid): 免费在线 UUID 生成器：使用加密安全随机数批量生成符合 RFC 4122 的 UUID v4，可大写、去连字符、加花括号，一键复制。
- [进制转换](https://qilingtools.com/zh/base-convert): 免费在线进制转换工具：二进制、八进制、十进制、十六进制及任意 2–36 进制互转，支持大整数（BigInt），本地实时计算。