Flexbox / Grid 生成器 把两种最常用的 CSS 布局做成可视化面板：点选 flex-direction、justify-content、align-items、wrap、gap 或 Grid 的列数、列宽模式、对齐方式，右侧预览里的方块实时跟着排布，下方同步生成可直接复制的 CSS。不用背属性、不用反复刷新，调到满意就拿走代码。
Flexbox 一切围绕「主轴」展开：
| 方向 | 主轴 | justify-content 管 | align-items 管 |
|---|---|---|---|
| row（默认） | 水平 → | 左右分布 | 上下对齐 |
| column | 垂直 ↓ | 上下分布 | 左右对齐 |
记住「justify 跟着主轴走、align 管交叉轴」，切一下 direction 在预览里观察方块怎么动，方向感很快就建立起来。
两者可以嵌套：常见做法是 Grid 搭整体框架，框架里的每个区块再用 Flex 排内部元素。
看主轴方向。在 Flexbox 里 justify-content 控制主轴上的分布、align-items 控制交叉轴上的对齐。当 flex-direction 是 row（默认）时，主轴是水平的，justify-content 管左右、align-items 管上下；切成 column 后两者的方向就互换了——这正是很多人觉得"怎么调反了"的原因，在预览里改一下 direction 立刻就直观了。
Flexbox 是一维布局，擅长把一排（或一列）元素按需对齐、分配空间、换行，适合导航条、按钮组、标签流；Grid 是二维布局，能同时控制行和列，适合卡片网格、整页框架、需要行列对齐的复杂排版。简单一行/一列优先 Flex，规整的行列矩阵用 Grid。
align-content 只在多行时才生效——也就是 flex-wrap 设为 wrap 且内容确实换了行，它控制的是这些行整体在交叉轴上的分布。单行（nowrap）时它没有作用，所以本工具只在选了 wrap 后才显示这一项。
1fr 是按比例平分剩余空间，每列等宽、随容器伸缩；auto 让列宽由内容撑开，多少内容占多宽；minmax(60px, 1fr) 是两者折中——不小于 60px，有空间时再按 1fr 拉伸，常用于既要保底宽度又要自适应的响应式网格。
现代浏览器对 Flexbox 和 Grid 的 gap 都已普遍支持（Grid 一直支持，Flex 的 gap 自 2020 年起各主流浏览器陆续到位）。如果要兼容很老的浏览器，可改用子项 margin 的老写法，但日常项目用 gap 没问题。
代码是给容器用的（默认类名 .container），把它套在你的父元素上，子元素会自动按设定排布。把类名换成你项目里的实际名称即可；预览里的方块只是占位，换成你的真实内容不影响布局规则。