Flexbox 可视化生成器
设置方向、换行、对齐和间距，再编辑每项的弹性尺寸与顺序。可从横排、居中、换行卡片或纵向堆叠预设开始。
主轴分布使用 justify-content，交叉轴对齐使用 align-items。align-content 控制多行换行布局。项目固定高度时，stretch 不一定改变其尺寸。
项目
实时预览
固定容器宽于屏幕时可滚动预览。背景、边框和标签仅为预览装饰；只导出布局 CSS。
使用步骤
如何使用
- 选择预设，设置容器属性及像素尺寸。
- 添加最多 12 项，编辑 grow、shrink、basis、order、align-self、宽度和高度。
- 检查实时预览，复制或下载 CSS，并使用对应父子类名。
容器与逐项属性
支持四种方向、三种换行、主轴分布、align-items、align-content 和 gap。每项 grow/shrink 为 0–20，basis 为 auto 或 px/%，order 为 −100–100 整数，另有 align-self、0–600px 宽度、0–400px 高度。容器宽 100–1200px、高 80–600px，间距 0–100px。
理解布局轴
justify-content 控制主轴，align-items 控制交叉轴。align-content 影响多行换行布局。显式宽高可能阻止 stretch 调整项目尺寸。grow、shrink、basis 可使主轴实际尺寸不同于指定宽高。order 只改变视觉位置，不改变 DOM 或阅读顺序。
本地 CSS 输出
预览使用导出的布局数值，包括零最小尺寸和项目 border-box。颜色、边框、标签仅为预览装饰。导出仅含容器/项目类，不含 HTML、SCSS、Tailwind 或媒体查询。不上传或存储内容。真实内容和外部样式会影响最终布局。
常见问题
你可能还想知道
align-content 为什么没有变化？
它控制多行 flex 布局。启用 wrap，并使用足够项目产生多行。
order 会改变无障碍阅读顺序吗？
不会，它只改变视觉布局。HTML 源顺序仍需有意义。