使用 align-items: stretch 可实现多列等高。Flexbox 中父容器设为 display: flex 并确保 align-items: stretch（默认值），子元素不设固定高度；Grid 布局中父容器使用 display: grid 且定义 grid-template-columns，子元素自动等高。需排查 max-height、绝对定位或表单元素等干扰因素，必要时单独设置 align-self: stretch。
在使用CSS多列布局（如 Flexbox 或 Grid）时，子元素高度不一致会导致视觉上错落不齐。想要让它们高度一致，最直接有效的方法是通过 align-items: stretch 来拉伸子元素。
Flexbox 中使用 align-items: stretch
当父容器设置为 display: flex 时，默认的交叉轴对齐方式就是 stretch，但某些情况下需要显式声明或检查是否有其他样式干扰。
常见做法：- 确保父容器设置了 display: flex
- 添加 align-items: stretch（虽然默认已生效）
- 子元素不要设置固定高度或 min-height 限制拉伸
- 避免子元素内有绝对定位元素撑开结构
示例代码：
.container {
display: flex;
gap: 10px;
align-items: stretch; /* 主要起作用 */
}
.item {
flex: 1;
background: #eee;
}
Grid 布局中让列等高
CSS Grid 天然支持等高列，只要子元素在同一个网格行中，它们会自动拉伸到相同高度。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 父容器使用 display: grid
- 定义列轨道（如 grid-template-columns）
- 无需额外设置 align-items，除非被覆盖
示例代码：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
align-items: stretch; /* 可省略，stretch 是默认值 */
}
常见问题排查
即使设置了 stretch，有时仍无法拉伸，可能原因包括：
- 子元素有 display: block 且内部内容受限：检查是否被 padding、margin 或 max-height 限制
- 子元素是表单元素或图片：这些元素有默认基线对齐行为，可尝试设置 align-self: stretch
- 父容器未正确设置高度传播：确保父级没有 height: auto 截断拉伸
如果个别子元素不拉伸，可以单独设置：
.item.special {
align-self: stretch;
}
基本上就这些。用好 align-items: stretch，配合 Flex 或 Grid 布局，就能轻松实现多列等高效果，不需要 JavaScript 计算高度。
