如何在HTML中实现类似WinForm的自动转列多列列表？

直接用CSS Flex布局就能搞定，完美适配元素高度不一、内容数量不固定的场景，还支持横向滚动。

代码示例 #

HTML结构 #

<div class="column-container">
  <!-- 可放入任意数量、任意高度的元素 -->
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
</div>

CSS样式 #

.column-container {
  /* 核心：设置容器高度，决定每列能容纳的垂直空间，按需调整 */
  height: 300px;
  display: flex;
  /* 让元素纵向排列，先填满第一列 */
  flex-direction: column;
  /* 第一列空间耗尽后，自动换到右侧新列 */
  flex-wrap: wrap;
  /* 列总宽度超出容器时，显示横向滚动条 */
  overflow-x: auto;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc; /* 可选，方便查看容器范围 */
}

.item {
  /* 设置每列宽度，按需调整 */
  width: 120px;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid #eee;
}

/* 模拟不同高度的元素，验证布局兼容性 */
.item:nth-child(3) {
  height: 60px;
}
.item:nth-child(7) {
  height: 80px;
}
.item:nth-child(12) {
  height: 50px;
}

关键逻辑说明 #

• flex-direction: column：强制元素从上到下纵向排列，优先占用第一列垂直空间
• flex-wrap: wrap：当第一列垂直空间被元素填满（无论元素高度是否一致），剩余元素自动换行到右侧新列
• overflow-x: auto：列总宽度超出容器时，自动显示横向滚动条，避免页面布局挤压
• 容器的height是核心参数：可设置为固定值、vh单位（如height: 80vh）或继承父元素高度，直接决定每列可容纳的元素数量

动态内容适配 #

无论元素数量、内容高度如何变化，只要保证：

1. 容器高度符合布局需求
2. 元素宽度统一（或自适应保证列宽一致）
   布局会自动调整，多余元素自动排到下一列，超出宽度时触发横向滚动。

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