有谁知道如何创建水平增长并具有水平滚动的项目列表？

Question

这是我的代码：

.wrap-here {
 display: flex;
 gap: 5px;
 flex-wrap: wrap;
 width: 250px;
 overflow: auto;
}

.item {
flex: 0 0 20%;
border: 1px solid black;
padding: 10px;
margin-bottom: 5px;
}

<div class="wrap-here">
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
   <div class="item">item</div>
</div>

而不是我所拥有的，我希望弹性盒将最大换行设置为 2 行，并且它将继续水平添加项目，如下图所示：

有人知道我该怎么做吗？

Answer 1

我不确定这是否可以通过

flexbox

实现。我强烈建议在

grid

中执行此操作，以获得更好的布局控制。

说明

flexbox

用于一维布局，而

grid

用于二维布局。 是的，

flex-wrap

会生成多行，但你无法按照你想要的方式控制布局。在这种情况下，

flex-wrap

的问题在于，应用时，它不会导致任何溢出，因为

flex-wrap

用于包裹项目以防止溢出。

解决方案

既然你用

width: 250px

指定了大小，我将假设你总是想要 2 行。 通过应用

grid-auto-flow: column

，布局将不断为每个项目创建一个新列。

使用

grid-template-rows: 1fr 1fr

，布局中将始终有 2 行。

使用

grid-auto-columns: 20%

，每个项目将成为一列，占据

20%

宽度的

250px

，即

50px

（据我所知，这是您指定的首选尺寸

flex-basis: 20%

）。

通过应用

overflow-x: auto

，从

250px

容器溢出的内容将会出现水平滚动条。

.wrap-here {
  display: grid;
  gap: 5px;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 20%;
  width: 250px;
  overflow-x: auto;
}

.item {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 5px;
}

<div class="wrap-here">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>