Flexbox适合一维布局如导航栏和居中对齐，通过display: flex;配合justify-content和align-items实现；Grid适用于二维布局如三栏页面，用display: grid;结合grid-template-columns和gap快速划分结构；两者可结合使用，分别处理局部与整体布局。
想要在HTML中实现快速布局，现代CSS的Flexbox和Grid是最有效的工具。它们能帮你轻松完成响应式设计、居中对齐、等高列等常见布局需求，无需依赖浮动或定位技巧。
使用 Flexbox 实现一维快速布局
Flexbox 适合处理单行或单列的布局场景，比如导航栏、卡片排列、内容垂直居中等。
基本用法：
1. 给父容器设置
display: flex;2. 通过属性控制子元素的排列方向、对齐方式和空间分配
常用属性示例：
立即学习“前端免费学习笔记（深入）”；
- flex-direction: 控制主轴方向（row / column）- justify-content: 主轴对齐方式（center / space-between / space-around）
- align-items: 交叉轴对齐（center / flex-start / stretch）
- flex: 子元素的伸缩比例（如 flex: 1; 填满剩余空间）
实用例子：水平垂直居中
给父元素添加：display: flex;
justify-content: center;
align-items: center;
height: 100vh;
使用 Grid 实现二维网格布局
CSS Grid 更强大，适合复杂页面结构，比如两栏+页脚、卡片网格、杂志式排版。
基本用法：
1. 父容器设置display: grid;2. 定义行与列的尺寸
3. 可选地用
grid-template-areas 可视化布局常用属性示例：
立即学习“前端免费学习笔记（深入）”；
- grid-template-columns: 定义每列宽度（如 1fr 1fr 或 repeat(3, 1fr)）- gap: 设置行列间距
- grid-column / grid-row: 控制某个子元素跨越几列或几行
- grid-template-areas: 用字符串定义区域布局
实用例子：三栏自适应布局
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 20px;
左边固定200px，中间自适应，右边固定200px，自动形成三栏。
Flexbox 与 Grid 如何选择？
两者不冲突，可结合使用。关键看布局维度：
- 一维布局（只关心行或列）→ 用 Flexbox- 二维布局（同时控制行和列）→ 用 Grid
- 卡片内部元素排列 → Flexbox
- 整体页面结构划分 → Grid
比如一个网页用 Grid 分成头部、侧边栏、主内容区，而每个区域内部按钮排列用 Flexbox 处理。
基本上就这些。掌握 Flexbox 和 Grid 后，大多数布局问题都能几行代码解决，不再需要复杂的 hack 方法。关键是多练习典型场景，熟悉属性组合效果。
