使用 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 可提升响应式下的视觉一致性。不复杂但容易忽略细节。
