答案：通过设置父容器display: flex和align-items: stretch，可使各列在交叉轴上自动拉伸至相同高度，实现等高列布局。子元素需避免固定高度或align-self覆盖，结合flex: 1分配空间，三栏内容无论长短均保持等高，利用Flexbox默认拉伸机制轻松达成视觉对齐效果。
在CSS布局中，实现等高列是一个常见的需求，尤其是在多栏布局中，各列内容长度不一，但希望视觉上保持高度一致。Flexbox 提供了简单而强大的方式来实现这一效果，核心在于 align-items 和 stretch 的配合使用。
Flex容器设置 display: flex
要启用 Flexbox 布局，首先需要将父容器的 display 属性设为 flex。这样其直接子元素（列）会成为弹性项目，并默认在主轴方向（水平）排列。
html.container {
display: flex;
}
.column {
/* 列样式 */
}
align-items 控制交叉轴对齐方式
align-items 定义了弹性项目在交叉轴（cross axis）上的对齐方式。当列是横向排列时，交叉轴是垂直方向。默认值为 stretch，这正是实现等高列的关键。
css.container {
display: flex;
align-items: stretch; /* 默认行为，可省略 */
}
在这个设置下，所有子列会自动拉伸，填满容器的最大高度。即使某一列内容较少，也会和其他最高列保持相同高度。
立即学习“前端免费学习笔记（深入）”；
确保子元素未设置固定高度或覆盖 stretch 行为
为了使 stretch 生效，需要注意以下几点：
- 子列不能设置 height 或 min-height 限制其垂直扩展
- 避免使用 align-self: flex-start 等覆盖单个项目的对齐方式
- 父容器应有明确的高度来源（比如内容撑开或外部设定），否则 stretch 可能无参照
实际示例：三栏等高布局
html<div class="container"> <div class="column" style="background: #cce5ff;">左侧内容较短</div> <div class="column" style="background: #e2f3d3;">中间内容较长，有很多文字内容，用来测试高度是否同步</div> <div class="column" style="background: #f8d7da;">右侧内容中等</div> </div>css
.container {
display: flex;
align-items: stretch;
gap: 10px;
}
.column {
flex: 1;
padding: 20px;
}
三列将始终保持相同高度，无论内容多少，得益于 align-items: stretch 的默认拉伸机制。
基本上就这些。利用 Flexbox 的 align-items 和 stretch，无需 JavaScript 或复杂 hack，就能轻松实现美观的等高列布局。不复杂但容易忽略。
