flex布局和grid布局区别，实现两边固定布局中间自适应

一、Flex 和 Grid 的核心区别（先给结论）

一句话区别（面试直接说）

Flex 是一维布局（行或列），Grid 是二维布局（行 + 列）。

---

二、Flex vs Grid 对比表（必背）

维度	Flex	Grid
布局维度	一维	二维
控制方向	主轴 / 交叉轴	行 / 列
是否适合整体布局	一般	非常适合
内容驱动	是	否
布局精确度	一般	高
响应式	中	强

---

三、什么时候用 Flex？什么时候用 Grid？

用 Flex 的场景

• 列表

• 导航栏

• 单行 / 单列布局

• 内容自适应为主

---

用 Grid 的场景

• 页面整体结构

• 后台系统

• 仪表盘

• 多行多列精确布局

---

四、两边固定，中间自适应 ------ 三种实现方式 ⭐

---

方案一：Flex（最常用，面试推荐）

HTML

<div class="container">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>

CSS

.container {
  display: flex;
}

.left,
.right {
  width: 200px;
}

.center {
  flex: 1;
}

原理

• 左右固定宽度

• 中间 flex: 1 占剩余空间

---

方案二：Grid（最优雅，现代推荐）⭐

CSS

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

优点

• 代码最少

• 布局最清晰

• 语义直观

---

方案三：传统定位（兼容老项目）

.left {
  float: left;
  width: 200px;
}

.right {
  float: right;
  width: 200px;
}

.center {
  margin: 0 200px;
}

❌ 不推荐新项目

---

五、Flex vs Grid 实现对比总结

方案	推荐度	特点
Flex	⭐⭐⭐⭐	灵活、兼容好
Grid	⭐⭐⭐⭐⭐	结构清晰
float	⭐	维护成本高

---

六、面试官常追问（提前准备）

1️⃣ 为什么 Grid 更适合整体布局？

• 原生二维

• 不依赖内容顺序

• 精确控制行列

---

2️⃣ Flex 的 flex: 1 本质？

flex: 1 1 0%;

---

3️⃣ Grid 的 fr 是什么？

• 剩余空间比例单位

---

七、30 秒面试标准回答（直接背）

Flex 是一维布局，适合线性结构；Grid 是二维布局，更适合整体页面结构。

两边固定中间自适应可以用 Flex 的 flex: 1，也可以用 Grid 的 200px 1fr 200px，Grid 方案更清晰。

---

八、一句话终极总结

布局复杂用 Grid，线性排列用 Flex。

---