如何实现类似flex-wrap row的垂直布局？子元素等宽变高

核心问题在于：使用flex-direction: column + flex-wrap: wrap时，父容器必须设置明确的高度值，否则容器会随子元素高度自动延展，永远不会触发换行逻辑。

修改后的CSS代码 #

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 5px;
  border: 2px solid #000;
  padding: 10px;
  /* 关键：设置父容器固定高度，作为触发换行的阈值 */
  height: 200px;
  /* 可选：列数过多时允许横向滚动，避免内容溢出 */
  overflow-x: auto;
}

.box {
  width: 80px;
  height: 50px;
  background-color: orange;
}

/* 模拟需求中高度各不相同的子元素 */
.box:nth-child(2) { height: 70px; }
.box:nth-child(4) { height: 60px; }
.box:nth-child(6) { height: 80px; }

补充说明 #

• 给.container设置height后，当子元素垂直方向总高度超过容器高度时，就会自动换行到右侧新列，完全对应flex-wrap: row的垂直版效果。
• 如果需要容器高度自适应，可替换为height: 100vh（占满视口高度）或height: 100%（需确保父元素有明确高度）。

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