CSS Flexbox 和 Grid 布局的使用与区别

Flexbox 和 Grid 是 CSS 中两种强大的布局模型，分别适用于不同的布局场景。本文将详细介绍 Flexbox 和 Grid 的使用方法、适用场景以及它们之间的主要区别。

---

1. Flexbox 布局

1.1 基本概念

• 一维布局：Flexbox 主要用于一维布局（行或列）。
• 容器和项目：通过设置容器的 display: flex，其子元素（项目）会自动成为 Flex 项目。
• 主轴和交叉轴：Flexbox 布局基于主轴（main axis）和交叉轴（cross axis）。

1.2 常用属性

属性	作用	示例值
display	定义 Flex 容器	flex、inline-flex
flex-direction	定义主轴方向	row、column
justify-content	定义项目在主轴上的对齐方式	center、space-between
align-items	定义项目在交叉轴上的对齐方式	center、stretch
flex-grow	定义项目的扩展比例	1、2
flex-shrink	定义项目的收缩比例	0、1
flex-basis	定义项目的初始大小	100px、auto

1.3 示例

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  flex: 1;
}

---

2. Grid 布局

2.1 基本概念

• 二维布局：Grid 主要用于二维布局（行和列）。
• 容器和项目：通过设置容器的 display: grid，其子元素（项目）会自动成为 Grid 项目。
• 网格线：Grid 布局基于网格线（grid lines）和网格轨道（grid tracks）。

2.2 常用属性

属性	作用	示例值
display	定义 Grid 容器	grid、inline-grid
grid-template-columns	定义列的大小和数量	100px 1fr 2fr
grid-template-rows	定义行的大小和数量	50px 1fr
grid-gap	定义行和列之间的间距	10px、1em
justify-items	定义项目在单元格内的水平对齐方式	start、center
align-items	定义项目在单元格内的垂直对齐方式	start、center
grid-column	定义项目跨越的列	1 / 3、span 2
grid-row	定义项目跨越的行	1 / 3、span 2

2.3 示例

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}
.item {
  grid-column: 1 / 3;
}

---

3. Flexbox 和 Grid 的区别

特性	Flexbox	Grid
维度	一维布局（行或列）	二维布局（行和列）
适用场景	适合小规模布局，如导航栏、卡片布局	适合大规模布局，如页面整体布局
对齐方式	通过 justify-content 和 align-items 控制	通过 justify-items 和 align-items 控制
项目大小	通过 flex-grow、flex-shrink 和 flex-basis 控制	通过 grid-template-columns 和 grid-template-rows 控制
项目位置	项目顺序由 HTML 结构决定	项目可以任意放置在网格中

---

4. 使用场景

4.1 Flexbox 的使用场景

• 导航栏：水平或垂直排列的导航项。
• 卡片布局：卡片内部的元素对齐和分布。
• 表单布局：表单元素的对齐和分布。

4.2 Grid 的使用场景

• 页面整体布局：页面的头部、侧边栏、内容区和页脚。
• 复杂网格布局：如图库、仪表盘等。
• 响应式布局：通过媒体查询调整网格布局。

---

5. 示例对比

5.1 Flexbox 示例

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  flex: 1;
}

5.2 Grid 示例

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}
.item {
  grid-column: 1 / 3;
}

---

6. 总结

特性	Flexbox	Grid
维度	一维布局（行或列）	二维布局（行和列）
适用场景	小规模布局	大规模布局
对齐方式	justify-content 和 align-items	justify-items 和 align-items
项目大小	flex-grow、flex-shrink、flex-basis	grid-template-columns、grid-template-rows
项目位置	由 HTML 结构决定	可以任意放置