如何用CSS/HTML/Flexbox实现不等高元素两列垂直对齐及响应式布局？

核心思路是利用Flexbox的垂直排列+换行特性，配合媒体查询实现响应式布局，以下是完整实现代码：

HTML结构 #

<div class="flex-column-container">
  <div class="card">元素1</div>
  <div class="card">元素2<br>多一行内容</div>
  <div class="card">元素3<br>更多<br>行的内容</div>
  <div class="card">元素4</div>
  <div class="card">元素5<br>额外一行</div>
</div>

CSS代码 #

.flex-column-container {
  display: flex;
  flex-direction: column; /* 让元素垂直排列 */
  flex-wrap: wrap; /* 超出容器高度时自动换行到下一列 */
  height: 420px; /* 控制列数的关键：高度足够容纳前N个元素，超出则流入下一列 */
  gap: 12px; /* 元素间的间距 */
  padding: 12px;
}

.card {
  width: calc(50% - 6px); /* 两列均分宽度，减去gap的一半 */
  padding: 18px;
  background-color: #f0f0f0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 窄屏自动切换为单列 */
@media (max-width: 768px) {
  .flex-column-container {
    height: auto; /* 取消固定高度，元素自然垂直堆叠 */
  }
  .card {
    width: 100%;
  }
}

关键逻辑说明 #

• 容器设置flex-direction: column + flex-wrap: wrap后，元素会优先填满第一列的垂直空间，当总高度超过容器设定值时，自动流入第二列
• 移除任意元素（比如第3个.card）后，Flexbox会自动重新计算布局，剩余元素会重新填充两列空间，完全符合你要的重排效果
• 媒体查询通过取消容器固定高度、设置元素宽度100%，实现窄屏单列的响应式切换

注意事项 #

• 容器的固定高度需要根据你实际元素的高度总和调整，确保刚好能让元素分成两列；如果需要动态适配不同内容，也可以结合JS计算容器高度，但纯CSS方案手动设置即可满足需求
• 如果元素高度差异极大，CSS Grid的grid-template-columns + grid-auto-flow: dense可能是更优解，但Flexbox完全能实现你描述的场景

内容的提问来源于stack exchange，提问作者Holden