有谁知道如何限制 flexbox 可以换行的行数？

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 是否可以实现。我强烈建议在 grid 中执行此操作以获得更好的布局控制。

说明

flexboxis for one dimensional layouts, while grid is for two dimensional layouts。是的，flex-wrap 会生成多行，但您无法随心所欲地控制布局。这种情况下 flex-wrap 的问题在于，当应用时，它不会导致任何溢出，因为 flex-wrap 用于将项目包装到防止溢出。

解决方案

由于您使用 width: 250px 指定了大小，我假设您总是需要 2 行。通过应用 grid-auto-flow: column，布局将不断为每个项目创建一个新列。

使用grid-template-rows: 1fr 1fr，布局中将始终有 2 行。

对于grid-auto-columns: 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>

有谁知道如何限制 flexbox 可以换行的行数？

Does anyone know how I can set a limit to the rows that flexbox can wrap?

css

flexbox

说明

解决方案