html - 如果超过高度，如何将其余行附加到第二列

Question

这是我的代码:

<ul style="height:200px;width:100%;">
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
</ul>

它是这样的:

这是我想要的样子:

通知

我不是在寻找 column-count 属性，因为它将 ul 分成两列，即使它们都适合 1 列。我想将不适合第一列的其余元素推到第二列。因此，如果第一列的最大值为 10，而我有 15 行，我希望第一列为 10，第二列为 5。

Answer 1

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
li {
  display: flex;
  flex: 1 1 auto;
  width: 10%;
  margin-bottom: 10px;
  border-radius: 10px;
}

<ul style="height:200px;width:100%;">
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
  <li>Hi</li>
</ul>