Flexbox 布局生成器
选择关键 flex 属性，立即得到对应的 display:flex CSS，并实时预览 1 / 2 / 3 个项目的排列效果。
✨ Flexbox Layout Generator
Pick the key flex properties and immediately get the matching display:flex CSS with a live preview of one, two and three items.
📐 工作原理与说明
display: flex；flex-direction / flex-wrap / justify-content / align-items / gap 组合
把 flex-direction、wrap、justify-content、align-items、gap 等属性拼装为 display:flex 声明，并以 1 / 2 / 3 个项目实时演示排列效果；用于一维布局。
⚠️ 使用说明与注意事项
- justify-content 控制主轴（由 flex-direction 决定水平或垂直）上的对齐与分布。
- align-items 控制交叉轴上的对齐；stretch 会让项目拉伸填满交叉轴。
- flex-wrap:wrap 允许换行，配合 gap 可快速实现自适应网格。
🧩 flex 属性速查
| 属性 | 常用取值 | 说明 |
|---|---|---|
| flex-direction | row / column / row-reverse / 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 | 是否换行 |
| gap | 任意长度（如 12px） | 项目间距 |
提示：要让单个项目在交叉轴居中可用 align-self；要控制项目伸缩用 flex: 1 或 flex-grow/shrink/basis。
📚 深度解析：Flexbox 布局生成器
💡 常见使用场景
- 做导航、卡片横排。
- 垂直居中布局。
- 响应式换行实验。
生成居中横排
<p><strong>输入：</strong>row、justify-center、align-center。</p><p><strong>处理：</strong>输出 flex 属性。</p><p><strong>输出：</strong>display:flex;… 代码与预览。</p>
❓ 常见问题（FAQ）
- 居中用哪个？
- 主轴 justify、交叉轴 align；两者都 center 即双向居中。结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。
- 生成的代码/图片能直接用吗？
- 可直接复制使用，建议粘到项目后在浏览器实测微调；本工具只生成不托管。
- 会保存或上传我的内容吗？
- 结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。