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

Question

我有一个列表，我希望从中构建两列。 列表中可以包含可变数量的项目，但最大值。 8个

我总是希望第一列有4个元素。 我已经尝试column-count: 2，但这对于不均匀的数字不起作用，因为第一行必须包含4个元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;