Question

我要在这里完成的是，我想使用两行来显示不确定数量的项目。我将使用垂直滚动显示溢出的项目。如果我在css下面使用它，则它在一行中显示项目。我想知道是否可以使用2行而不是1行，或者是否有任何破解可以使用flexbox来实现？

<div>
    <div ng-repeat="title in group_title">
        <h1>{{title}}</h1>
        <ul>
            <li ng-repeat="item in groups_array[title]">
              {{item.id + ' ' + item[''][0]}}: {{item[''][1]}}
            </li>
        </ul>
    </div>
</div>

.items-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

我一直在努力寻找解决方案，如果可能的话，也可以通过flexbox找到答案。任何帮助将不胜感激。

Answer 1

您可以使用CSS网格进行此操作：

.items-list {
  display: grid;
  grid-template-rows: 50px 50px; /* 2 rows of 50px */
  grid-auto-flow: column;  /* a column flow */
  grid-auto-columns:100px; /* each column will 100px of width */
  grid-gap: 5px;
  overflow: auto;
}
.item {
  border:2px solid red;
}

<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

是否可以将弹性框项目显示为两行而不是一列？

1 个答案: