高度溢出时将项目包装到下一列？

【问题标题】：Wrap items to the next column when height is overflowing?高度溢出时将项目包装到下一列？
【发布时间】：2022-01-09 18:49:05
【问题描述】：

我有一个容器，里面有物品。

此容器设置了高度。我想通过保持它们到下一列的顺序来将这个容器内的项目包装到一个新列中。我该怎么做？

例如，如果我有 5 件物品，我想这样包装它们：

1 4
2 5
3

不喜欢

1 2 
3 4 
5

这是一张供参考的照片：

从这张照片中，我想创建一个包含第 11 项和第 12 项的新列

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以将 flexbox 与 flex-direction: column 一起使用：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 20rem;
  width: 20rem;
  border: 1px solid black;
  padding: 5px;
  gap: 5px;
}

.item {
  font-size: 5rem;
  border: 1px solid black;
  text-align: center;
}

<div class="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>

【讨论】：

我发誓我试过这个但对我不起作用。有时你必须重试哈哈哈哈。谢谢，朋友！