使用 Flexbox 的 align-items: stretch 可实现等高列布局，.container 设置 display: flex 后，子元素自动等高；需确保无固定高度、不脱离文档流，并在移动端通过 media 查询调整 flex-direction 以适配堆叠，配合 box-sizing 和 padding 等优化细节，提升响应式一致性。
在响应式网页设计中，实现等高列布局是一个常见需求。比如一个两栏或三栏布局，即使某一列内容较少，也要和其他列保持相同高度。利用 CSS Flexbox 的 align-items: stretch 特性，可以轻松实现这一效果。
Flexbox 默认拉伸实现等高列
Flex 容器中的子元素（flex 项目）默认会沿交叉轴（cross axis）拉伸，前提是这些项目没有设置固定高度。这个行为由 align-items: stretch 控制，是 Flexbox 的默认属性值。
只要父容器使用 display: flex，其直接子元素就会自动等高：
.container {
display: flex;
}
.column {
flex: 1; / 平均分配宽度 /
padding: 20px;
background: #f0f0f0;
margin: 5px;
}
在这个结构下，无论哪一列内容多或少，所有 .column 都会和最高的那一列保持相同高度。
立即学习“前端免费学习笔记（深入）”；
确保 stretch 生效的条件
虽然 stretch 是默认行为，但在某些情况下它可能失效。要让等高生效，需注意以下几点：
- 父容器必须设置 display: flex
- 子列不能设置 height 或 min-height 固定值（除非你希望限制拉伸）
- 避免使用 float、position: absolute 等脱离文档流的方式
- 容器本身要有明确的高度来源（比如内容撑开或父级限制）
响应式适配：移动端堆叠布局
在小屏幕设备上，通常希望列从横向排列变为纵向堆叠。可以通过媒体查询关闭 flex 布局或改变 flex-direction：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
此时每列仍能独立撑满高度，适合移动端阅读。如果需要在堆叠时恢复正常高度（不强制等高），可临时设置 align-items: flex-start。
实用技巧与注意事项
实际开发中，常遇到图片或按钮底部留白的问题，这会影响视觉上的“等高”感受。建议统一设置对齐方式：
- 使用 box-sizing: border-box 统一盒模型
- 为子元素设置 align-self: stretch 强制继承（必要时）
- 内层内容使用 padding 而非 margin 来控制间距，避免影响整体高度
对于嵌套结构，可在内部再用 flex 布局垂直居中内容，进一步提升视觉一致性。
基本上就这些。用 Flexbox 的 stretch 行为实现等高列，简洁高效，配合响应式断点调整布局，适用于大多数现代网页设计场景。不复杂但容易忽略细节。
