摘要：免费的在线 CSS Flexbox 生成器，可视化调整 flex-direction/justify-content/align-items 等属性，实时预览，一键复制 CSS 代码。
本地工具可在 DevTools → Network 搜索输入内容，通常不会出现在请求中。
下一步
使用指南
弹性布局属性多（方向、换行、主轴对齐、交叉轴对齐、间距），记不全时布局就歪。本工具可视化调节容器与子项（增长、收缩、基准、自对齐、顺序），实时生成样式代码——适合学语法和快速出原型，本地预览。
1. 搭一个弹性布局
生成的是标准弹性布局声明。二维复杂网格请用网格生成器；一维排布（工具条、标签行、底栏）用弹性布局足够。
- 调主轴方向、换行、主轴与交叉轴对齐、间距。
- 增删子项，点选某一项调节其增长、收缩、基准与自对齐。
- 复制容器与子项样式到项目里。
2. 常见模式
- 顶栏：两端对齐加交叉轴居中。
- 卡片底栏按钮：列方向加顶外边距自动，把按钮推到底。
- 等分栏：子项增长设为 1。
- 间距用 gap，少用外边距硬撑，减少折叠与双边距烦恼。
3. 解决多数布局的三个属性
多数弹性布局可归约为三个决策：主轴如何分配多余空间、交叉轴如何对齐、是否换行并配合间距。生成器把这些直接暴露出来，是为了建立映射，而不是背片段。两个经典陷阱：基准宽度与最小宽度交互会阻止收缩（最小宽度归零常是解锁键）；间距属性不会像外边距那样折叠。
4. 子项级控件何时用
- 只要某一个卡片拉高或置顶，用自对齐，而不是改容器对齐连坐其他项。
- 顺序属性可改变视觉次序，但注意无障碍阅读顺序可能与视觉不一致。
- 增长与收缩同时为 0 时，项更接近固定尺寸——适合图标列。
5. 和网格、单位工具的配合
整页分栏与二维画廊改用网格生成器；间距数值需要 rem 时用像素 rem 换算。复制代码后仍要在真实内容长度下回归换行——生成器里的短占位文字不会暴露长标题撑破的问题。
6. 响应式注意
处理前后各留一份原文副本，方便对照；遇到不确定的边界输入，先缩小样本再放大。团队协作时把本页步骤写进检查清单，比口头约定更不容易漂移。 处理前后各留一份原文副本，方便对照；遇到不确定的边界输入，先缩小样本再放大。团队协作时把本页步骤写进检查清单，比口头约定更不容易漂移。 处理前后各留一份原文副本，方便对照；遇到不确定的边界输入，先缩小样本再放大。团队协作时把本页步骤写进检查清单，比口头约定更不容易漂移。 处理前后各留一份原文副本，方便对照；遇到不确定的边界输入，先缩小样本再放大。团队协作时把本页步骤写进检查清单，比口头约定更不容易漂移。
- 窄屏常要改方向为列，并减小间距。
- 不要假设「不换行」在小屏仍可读，提前勾选换行看预览。
- 把关键断点写进项目样式，而不是只留在生成器会话里。
常见问题
不收费、也无需注册：调参、实时预览与代码生成都在本地浏览器完成，不限使用次数。
容器级支持 flex-direction、flex-wrap、justify-content、align-items、align-content 与 gap；子项可单独调节增长、收缩、基准与自对齐。可视化调整后即时生成 CSS 代码。
顶栏：两端对齐加交叉轴居中；把卡片按钮推到底：列方向加上侧自动外边距；等分栏：子项增长设为 1；间距优先用 gap 而非外边距硬撑——gap 不会像外边距那样折叠，能避开折叠与双边距的烦恼。
经典原因是基准宽度与 min-width 的交互：内容的最小宽度会顶住收缩，把最小宽度归零往往是解锁键。另外，增长与收缩同时为 0 时子项接近固定尺寸——图标列正好用得上这个特性。
用子项级的自对齐（align-self），不要改容器对齐连坐其他项。顺序属性可以改变视觉次序，但无障碍阅读顺序未必跟着变，依赖它之前想清楚。
两件事：用真实内容长度回归换行——生成器里的短占位文字不会暴露长标题撑破的问题；补关键断点——窄屏常要改列方向并减小间距，断点应写进项目样式而不是留在生成器会话里。二维布局请改用网格生成器，间距要换算 rem 时配合像素 rem 换算工具。