如何创建水平生长并具有水平滚动的项目列表？

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>

我希望Flexbox将限制设置为2行最​​大包裹，而不是我所拥有的，它将继续水平添加项目，例如在下面的图片中：

Answer 1

我不确定 flexbox 是否可以实现。我强烈建议您在网格中执行此操作，以实现更好的布局控件。

说明

flexbox ， grid 。
是的， flex-wrap 将构成多行，但是您无法按照需要控制布局。在这种情况下， flex-wrap 的问题是，当应用时，它不会引起任何溢出，因为 flex-wrap 用于将项目包装到防止溢出。

该解决方案

由于您用宽度指定了大小：250px 我将假设您始终需要2行。
通过应用网格-Auto-Flow：列，布局将不断为每个项目制作一个新列。

使用网格 - 板板行：1FR 1FR ，布局中总会有2行。

使用网格-Auto-Collumns：20％，每个项目将是 250px 的宽度 20％的列，代码> 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>