Flexbox / Grid 生成器
Flexbox / Grid 生成器将两种主流 CSS 布局方案整合为一个可视化操作面板：点击调节 flex-direction、justify-content、align-items、wrap、gap 等属性，或切换到 Grid 模式调整列数、列宽分配和对齐方式，右侧预览区域实时同步排版效果，底部同步输出可直接复制使用的 CSS 代码。无需手动查阅文档、无需反复刷新页面验证，调到满意效果后一键复制即可。
Flexbox 的排版逻辑完全围绕「主轴」方向展开：
| 排列方向 | 主轴走向 | justify-content 控制 | align-items 控制 |
|---|---|---|---|
| row（默认） | 水平 → | 水平方向上的间距分配 | 垂直方向上的对齐位置 |
| column | 垂直 ↓ | 垂直方向上的间距分配 | 水平方向上的对齐位置 |
justify 沿主轴方向调整元素间距，align 则在交叉轴方向上对齐元素。切换 flex-direction 后留意预览中方块的运动轨迹，空间感知会迅速建立。Flexbox — 线性排列
擅长处理单一方向（一行或一列）的元素对齐与分布。典型场景：导航菜单、按钮组、标签列表、表单项排列。
Grid — 网格布局
同时掌控行与列两个维度，适合需要行列交叉对齐的场景：图片墙、整页布局骨架、数据仪表盘等复杂排版。
快速验证对齐效果
拿不准 justify-content 和 align-items 各自的作用方向？点几个按钮看预览区方块的位移变化，确认效果后直接复制生成的 CSS 粘贴到项目中。
搭建响应式卡片网格
利用 Flex 的 wrap + gap 组合或多列 Grid 布局，在可视化面板中调整列数、间距和换行策略，满意后将代码应用到导航栏、卡片列表或表单中。
学习理解布局差异
同一组方块在 Flex 和 Grid 两种模式间切换，直观对比一维布局与二维布局的行为差异，快速判断项目中该选用哪种方案。
justify-content 沿主轴方向（默认水平）分配子元素之间的空间，控制的是「间距分布」；align-items 沿交叉轴方向（默认垂直）决定子元素在该轴上的对齐位置，控制的是「位置偏移」。当 flex-direction 切换为 column 时，两者的控制轴向随之对调。
如果元素只需要在一条直线上排列和分布（导航栏、工具栏、表单行），Flexbox 更轻量直观；如果需要同时规划行和列的结构（图片墙、仪表盘、整页骨架），Grid 的二维控制力更强。两者完全可以嵌套使用。
align-content 只在容器同时满足两个条件时才会生效：flex-wrap 设为 wrap（或 wrap-reverse），且子元素在交叉轴方向上发生了换行产生多余空间。如果只有一行或未开启换行，该属性不起作用。
1fr 表示按比例分配剩余空间中的等份；minmax(最小值, 最大值) 为列设定弹性范围，允许在指定的最小和最大宽度之间伸缩；auto 则让列宽由内容撑开，不受固定比例约束。实际使用中三者常组合搭配。
gap 在 Flexbox 和 Grid 布局中均已获得所有主流浏览器的稳定支持（Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+）。对于需要兼容更早版本的项目，可以用 margin 配合负外边距来模拟类似效果。
点击「复制」按钮后，生成的 CSS 代码已包含完整的属性声明。将代码粘贴到你的样式表中，为容器元素添加对应的 class 名（如 .container），子元素添加 .item 类名即可生效。生成的代码可直接用于生产环境。