使用Flexbox实现等高列只需设置父容器display: flex，子元素会自动拉伸至相同高度。通过flex: 1可让各列等宽并填满容器，配合padding、margin和背景色可直观展示等高效果。无论内容多少，列高始终一致，适用于多栏布局、卡片组和响应式设计。关键在于避免子元素设置固定高度，推荐在容器上使用min-height控制最小高度，确保布局灵活性。
在CSS中使用Flexbox制作等高列非常简单，只需要将父容器设置为display: flex，其子元素（列）会自动拉伸到相同高度。
基本原理
Flexbox默认会让交叉轴（cross axis）上的子元素拉伸并填满容器的高度。这意味着即使各列内容不同，它们也会保持等高。
实现步骤
以下是具体写法：
.container {
display: flex;
}
<p>.column {
flex: 1; /<em> 每列等宽，也可用固定宽度 </em>/
padding: 15px;
background-color: #f0f0f0;
margin: 5px;
}</p>HTML结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="column">短内容</div> <div class="column">这里有很多很多内容...</div> <div class="column"><p>中间内容</p></div> </div>
关键点说明
- display: flex：让子元素成为弹性项目，自动等高
- flex: 1：使每列平均分配剩余空间（可替换为具体宽度）
- 无需设置固定高度，子元素会随最高的一列自动拉伸
- 背景色和边距可以直观看出每列高度一致
注意事项
如果某列设置了min-height或height，可能会影响布局。通常让高度由内容或Flex行为决定即可。若需控制最小高度，建议在容器上设置min-height。
基本上就这些，不复杂但很实用。Flex的这种特性非常适合做多栏布局、卡片组或响应式设计中的等高区块。
