html - 如果列表项超出容器的高度，如何将它们移动到新列？

Question

我有一个列表，我想从中构建两列。该列表中可以包含可变数量的元素，但最多。共 8 个

我总是希望第一列有 4 个元素。我已经尝试过 column-count: 2 但这在奇数上不起作用，因为第一行必须包含 4 个元素。

.container {
  border: 1px solid red;
  width: 300px;
  height: 90px;
}

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

Answer 1

您可以使用 Flexbox 执行此操作:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 300px;
  height: 200px;
}
li {
  height: 25%;
}

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>