CSS Flexbox 和 Grid 布局教程：主轴交叉轴对齐、换行、网格行列，在线生成布局代码
一句话答案
Flex 是一维布局：justify-content 管主轴对齐，align-items 管交叉轴对齐，flex-wrap 控制换行。Grid 是二维布局：grid-template-columns: repeat(3, 1fr) 即三列等宽，gap 设置间距。
广告Advertisement
Flexbox 生成器
- 选方向：打开 Flexbox 布局生成器，“方向”选 row（横排）或 column（竖排）。
- 设置对齐：“主轴对齐”对应 justify-content，“交叉轴对齐”对应 align-items。
- 换行和间距：“换行”选 nowrap 或 wrap，拖动“间距”滑块调整 gap。
- 复制代码：预览区实时显示效果，点“复制 CSS”。
📦 Flexbox 布局生成器
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
Flex 常用属性
| 属性 | 作用 | 常用值 |
|---|---|---|
| flex-direction | 主轴方向 | row、column |
| justify-content | 主轴对齐 | flex-start、center、space-between |
| align-items | 交叉轴对齐 | stretch、center |
| flex-wrap | 是否换行 | nowrap、wrap |
| gap | 子元素间距 | 10px |
水平垂直居中：display: flex; justify-content: center; align-items: center;
广告Advertisement
Grid 生成器
- 设置行列：打开 CSS Grid 布局生成器，拖动“列数”和“行数”滑块。
- 设置间距：调整“列间距”和“行间距”。
- 选列宽：“列宽”可选 1fr（等分）、auto、100px，或 minmax(80px,1fr)。
- 复制代码：点“复制 CSS”。
Flex 还是 Grid
- 一行或一列排列（导航栏、按钮组、卡片内部）：用 Flex；
- 行和列同时控制（相册、仪表盘、页面整体布局）：用 Grid；
- 两者可以嵌套使用：Grid 做整体框架，Flex 做组件内部。
响应式卡片墙常用写法：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 屏幕变窄时自动减少列数。
配合其他样式
圆角和阴影见 CSS 圆角、CSS 阴影；过渡动画曲线见 缓动曲线。
常见问题
justify-content 和 align-items 怎么记？
justify-content 沿主轴（flex-direction 的方向），align-items 沿与主轴垂直的交叉轴。方向改成 column 后，两者的作用方向也会互换。
fr 是什么单位？
fr 表示剩余空间的份数，1fr 1fr 1fr 就是三列等分。
老浏览器支持 gap 吗？
现代浏览器都支持 Flex 和 Grid 的 gap；需要兼容很旧的浏览器时可以改用 margin。