Published on

CSS布局技巧：Flex与Grid实现垂直居中与三区域布局的对比

Authors

布局需求

场景：需要一个元素在父元素中垂直居中，三个元素，上下固定高度，中间自适应高度，切不会压缩上下两个元素的高度。

这是前端开发中非常常见的布局需求，比如经典的"页头-内容-页脚"结构，其中页头和页脚高度固定，而内容区域需要自适应填充剩余空间。本文将详细讲解如何使用现代CSS的两大布局利器——Flex和Grid来分别实现这一需求，并探讨Grid布局在某些场景下的独特优势。

使用Flex实现

Flex布局（弹性盒子）是一维布局模型，特别适合处理行或列的布局需求。下面是使用Flex实现上述场景的方法：

HTML结构

<div class="container flex-container">
  <header class="header">页头区域</header>
  <main class="content">内容区域</main>
  <footer class="footer">页脚区域</footer>
</div>

CSS实现

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 让容器至少占满整个视口高度 */
}

.header {
  height: 80px;
  flex-shrink: 0; /* 防止头部内容压缩 */
  background-color: #f0f0f0;
}

.content {
  flex: 1; /* 自动填充剩余空间 */
  background-color: #e0e0e0;
  overflow-y: auto; /* 内容过多时可滚动 */
}

.footer {
  height: 60px;
  flex-shrink: 0; /* 防止底部内容压缩 */
  background-color: #f0f0f0;
}

这种方法简单有效，特别适合单列布局的情况。

使用Grid实现

Grid布局是二维布局系统，同时处理行和列，提供了更强大的布局能力。下面是使用Grid实现同样需求的方法：

HTML结构

<div class="container grid-container">
  <header class="header">页头区域</header>
  <main class="content">内容区域</main>
  <footer class="footer">页脚区域</footer>
</div>

CSS实现

.grid-container {
  display: grid;
  grid-template-rows: 80px 1fr 60px; /* 定义三行：固定高度、自适应高度、固定高度 */
  min-height: 100vh;
}

.header {
  background-color: #f0f0f0;
}

.content {
  background-color: #e0e0e0;
  overflow-y: auto;
}

.footer {
  background-color: #f0f0f0;
}

实现原理

  1. 通过display: grid创建网格布局
  2. 使用grid-template-rows定义三行的高度规则：
    • 第一行高度为80px（页头）
    • 第二行高度为1fr（弹性单位，占用剩余所有空间）
    • 第三行高度为60px（页脚）
  3. 内容区域同样可以通过overflow-y: auto实现滚动

Grid方法的优势在于直接通过grid-template-rows声明了整个布局结构，代码更简洁直观。

Grid布局的独特优势

虽然上面的例子中Flex和Grid都能轻松实现需求，但Grid在以下场景中展现出明显优势：

1. 二维布局控制

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1; /* 横跨所有列 */
}

.sidebar-left {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.content {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.sidebar-right {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

.footer {
  grid-column: 1 / -1; /* 横跨所有列 */
}

这种"圣杯布局"（两侧固定，中间自适应）在Grid中非常直观，而用Flex实现则需要嵌套多个容器。

2. 区域命名与布局

Grid允许我们通过区域名称定义布局，使代码更易读：

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar-left content sidebar-right"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar-left { grid-area: sidebar-left; }
.content { grid-area: content; }
.sidebar-right { grid-area: sidebar-right; }
.footer { grid-area: footer; }

3. 间隙控制的一致性

Grid布局中的间隙设置更为简便：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 1fr 60px;
  gap: 20px; /* 所有网格项之间的间隙 */
}

而Flex需要单独考虑行与列的间隙：

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-container > * {
  margin-bottom: 20px;
}

.flex-container > *:last-child {
  margin-bottom: 0;
}

4. 对齐控制的精确性

Grid提供了强大的对齐控制，可以同时控制行和列的对齐方式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  justify-content: center; /* 水平居中 */
  align-content: center; /* 垂直居中 */
}

5. 自动布局与响应式设计

Grid的自动布局功能特别适合响应式设计：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

这段代码会自动创建尽可能多的列，每列最小宽度为200px，并平均分配可用空间。这种"流式布局"在Flex中很难实现。

6. 重叠元素的控制

Grid允许元素重叠，这在创建复杂布局时非常有用：

.item1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  z-index: 1;
}

.item2 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  z-index: 2;
}

7. 单元格内元素对齐：justify-self和align-self

Grid布局最显著的优势之一是对单个网格项在其所在网格单元格内的精确对齐控制：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
}

.item1 {
  background-color: #f08080;
  /* 在单元格内水平居中 */
  justify-self: center;
  /* 在单元格内垂直居中 */
  align-self: center;
}

.item2 {
  background-color: #90ee90;
  /* 在单元格内靠右对齐 */
  justify-self: end;
  /* 在单元格内靠底对齐 */
  align-self: end;
}

.item3 {
  background-color: #add8e6;
  /* 拉伸填满整个单元格宽度 */
  justify-self: stretch;
  /* 在单元格内靠顶对齐 */
  align-self: start;
}

总结

在实现"上下固定高度，中间自适应"的布局需求时，Flex和Grid都是有效的解决方案：

  • Flex布局优势在于：概念简单，浏览器兼容性较好，特别适合一维布局
  • Grid布局优势在于：声明式语法更直观，二维控制能力强大，适合复杂布局

当布局需求超出简单的线性排列时，Grid的优势就会凸显。特别是在需要精确控制二维空间、创建复杂的响应式布局、或需要元素重叠的场景下，Grid是更理想的选择。

随着浏览器对Grid布局的支持日益完善，越来越多的开发者开始在生产环境中使用Grid。我的建议是：对于简单的线性布局，可以继续使用Flex；而对于复杂的二维布局需求，不妨尝试Grid的强大能力。

最后，Flex和Grid并不是互斥的技术，在实际项目中往往是结合使用，取长补短，达到最佳的布局效果。

Discuss on Twitter • View on GitHub