如果达到高度,css将元素移动到新列

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

你可以这样做__CODE__:

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>