时间戳

首页 > 解决方案 > 是否可以在两行而不是一行中显示 flexbox 项目？

css - 是否可以在两行而不是一行中显示 flexbox 项目？

问题描述

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

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

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

我已经尝试了几个小时来寻找解决方案，或者如果它甚至可以使用 flexbox 做到这一点的话。任何帮助将不胜感激。

标签： cssflexbox

解决方案

您可以使用 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>

获得另一种布局的相关问题：我可以使用 css-grid 以从左到右的阅读顺序在两行上显示未知数量的项目吗？

推荐阅读