跳到主要内容

Grid vs Flexbox 与高度拉伸

一句话结论​

Flexbox 是一维布局（管一行或一列）；Grid 是二维布局（同时管行和列）。 两者的子元素在交叉轴上默认都是 stretch，Grid 之所以更容易让人感觉「高度被拉满」，是因为 Grid 的行高常被同行最高的元素撑起来。

Grid vs Flexbox：怎么选​

场景更适合原因
页面整体骨架、仪表盘、卡片矩阵Grid需要同时约束行和列
导航栏、按钮组、标签组Flexbox只沿一个方向排列
元素要跨行、跨列或重叠Grid网格线/命名区域天然支持
内容数量不定、需要自动换行分配空间Flexboxflex-wrap • flex: 1 更直接
多个兄弟元素要对齐到同一条基准线Grid共享轨道，天然对齐
组件内部图标 + 文本 + 徽标Flexbox简单、语义直白

两者并不冲突。真实项目里最常见的是「外层 Grid 搭骨架 + 内层 Flex 排内容」：

/* 外层：页面骨架，二维 */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
}

/* 内层：顶栏内部一维排列 */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
}

判断口诀：行列都要管 → Grid；只沿一个方向排 → Flexbox。

默认拉伸行为：两者的共同点​

Grid 和 Flexbox 的子元素在交叉轴上默认都会被拉伸，因为默认对齐值都是：

.container {
  align-items: stretch; /* 这是默认值，不写也生效 */
}

更准确地说：

  • Flex 容器默认 flex-direction: row，主轴水平、交叉轴垂直，子元素沿垂直方向拉伸。
  • Grid 容器让每个 Grid Item 在自己的 Grid Area 内沿块轴（通常是垂直方向）拉伸。
  • 所以二者都不是「天然不占满高度」，而是都存在默认拉伸行为。

为什么 Flexbox 看起来通常不占满高度​

关键不在 stretch，而在容器本身有没有高度。

.flex {
  display: flex; /* 没有 height */
}

此时容器高度由内容撑开，子元素虽然 stretch，也只是拉伸到「内容自然形成的高度」，看不出效果。

给容器一个明确高度，拉伸立刻可见：

.flex {
  display: flex;
  height: 300px;
}

.item {
  background: pink; /* 会被拉到 300px 高 */
}

为什么 Grid 更容易感觉「高度占满」​

两个叠加原因：

  1. Grid 常用于页面骨架，容器上更容易出现 min-height: 100vh、height: 100% 这类明确高度。
  2. Grid 的行高由该行最高的内容决定，而同行其他 Item 默认 stretch，于是短内容也被拉满。
.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

.right {
  height: 300px; /* 把整行撑到 300px */
}

结果：.left 哪怕只有一行字，也会被拉伸到 300px 高。

可直接复制的对照 Demo​

<h3>默认：align-items: stretch</h3>
<div class="grid stretch">
  <div class="box left">短内容</div>
  <div class="box right">高度 200px 的内容</div>
</div>

<h3>修复：align-items: start</h3>
<div class="grid start">
  <div class="box left">短内容</div>
  <div class="box right">高度 200px 的内容</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.grid.stretch { align-items: stretch; } /* 默认值，可省略 */
.grid.start   { align-items: start; }

.box   { padding: 8px; border-radius: 6px; }
.left  { background: #ffd9e0; }
.right { background: #cfe8ff; height: 200px; }

观察结果：

容器设置.left 的实际高度原因
align-items: stretch（默认）200px行高被 .right 撑到 200px，.left 在自己的 Grid Area 内拉满
align-items: start约 34px（内容高度）Item 不再拉伸，按内容高度显示并顶部对齐

让元素高度不占满​

只控制单个 Grid Item：

.item {
  align-self: start;  /* 顶部对齐，按内容高度 */
  /* align-self: center; 垂直居中 */
  /* align-self: end;    底部对齐 */
}

让所有 Grid Item 都按内容高度显示：

.grid {
  display: grid;
  align-items: start;
}

⚠️ align-items: start 只改变「Item 在行内的对齐」，不会改变行高本身。那一行依然是 200px 高，只是 .left 不再填满它，所以下面的行不会上移。想让行本身变矮，要去调 grid-template-rows / grid-auto-rows，或去掉撑高那行的元素高度。

排查「元素被莫名拉高」的四步法​

  1. 确认是不是 stretch 引起的：临时给该元素加 align-self: start，如果高度立刻缩回内容高度，就是默认拉伸。
  2. 看这一行里谁最高：常见元凶是设置了 height 的图片、带 aspect-ratio 的卡片、内容特别多的兄弟元素。
  3. 看容器有没有被撑高：容器上的 height: 100%、min-height: 100vh、grid-template-rows: 1fr 都会让行轨道变高。
  4. 决定作用范围：只改一个元素用 align-self，整体统一用容器上的 align-items。

Grid 容器高度、行高与 Item 高度​

这是三件独立的事，混淆它们是绝大多数高度问题的根源。

层级默认行为由什么决定怎么改
Grid 容器高度由内容撑开，不会天然 100%自身 height / min-height，或父级约束min-height: 100vh、height: 100%（需父级有高度）
Grid 行高显式行看 grid-template-rows，隐式行约等于 autoauto 行由该行最高内容决定grid-template-rows、grid-auto-rows、minmax()
Grid Item 高度align-self: stretch，在所在 Area 内拉满上面两层算出的行高align-self / 容器上的 align-items

一句话总结：

Grid 容器高度默认由内容撑开；Grid 行高默认由该行最高内容决定；Grid Item 默认 align-self: stretch，所以会在所在网格区域内拉满高度。