是否可以将弹性框项目显示为两行而不是一列? [英] Is it possible to display flexbox items in two rows instead of one?

问题描述

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

What I'm trying to accomplish here is, I want to use two rows to display uncertain amount of items. I will use vertical scroll to show overflowed items. If I use below css then it displays the items in one row. I want to know if it's possible to use 2 rows instead of one or if there is any hack to achieve this using 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寻求答案.任何帮助将不胜感激.

I've been trying for hours to find a solution, or an answer if its even possible to do this with flexbox. Any help would be very much appreciated.

推荐答案

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

You can do this using CSS grid:

.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网格从左到左显示未知数量的项目吗?正确的阅读顺序，超过两行?

Related question to get another kind of layout: Can I use css-grid to display an unknown number of items, in left-to-right reading order, over two rows?

这篇关于是否可以将弹性框项目显示为两行而不是一列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！