使用 align-items: stretch 可使 Flexbox 或 Grid 布局中子元素等高，默认拉伸填充最大高度，需避免设置固定 height；结合 min-height 可防止内容少时塌陷，提升响应式视觉一致性。

在CSS响应式布局中，当子元素内容不同导致高度不一致时，会影响整体视觉效果，尤其在Flexbox或Grid布局中更为明显。解决这个问题的核心是统一子元素的高度表现，常用方法包括使用 align-items: stretch 或设置 min-height 来控制最小高度。

使用 align-items: stretch（默认行为）

在 Flex 容器中，align-items: stretch 是默认值，它会让子元素在交叉轴上拉伸以填满容器的最大高度。

前提是子元素不能有固定的高度（如 height 设置为具体值），否则会失效。

.container {
  display: flex;
  align-items: stretch; /* 默认可省略 */
}
.item {
  flex: 1;
  height: auto; /* 避免设置固定 height */
}
  

这样所有 .item 会自动拉高到与最高子元素相同的高度，实现视觉对齐。

设置 min-height 保证最低展示

如果子元素内容较少，即使使用 stretch 也可能显得局促。这时可以给子元素设置 min-height 来确保有足够的空间展示内容或背景样式。

• 卡片布局中希望每张卡片至少有一个基础高度
• 避免文字过少时卡片看起来“矮小”

.item {
  min-height: 200px;
  height: auto;
}
  

结合 stretch 使用，既能适应高内容，又能防止低内容塌陷。

配合 Grid 布局的等高列

在 CSS Grid 中，同一行的子元素默认不会自动等高，但可以通过设置容器对齐方式来实现类似效果。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: stretch;
}
.grid-item {
  height: auto;
}
  

这样每一行内的项目会在垂直方向拉伸至相同高度。

基本上就这些。关键是理解 stretch 的作用机制，并避免固定 height 干扰其行为。合理使用 min-height 可提升响应式下的视觉一致性。不复杂但容易忽略细节。