如何用flexbox将四列包装成两行两列？

Question

我们正在使用 flexbox 并尝试执行以下操作。目标是每个项目在移动断点上有一列，在平板电脑断点上有两列，在桌面断点上有四列。

该示例仅使用了四个项目，但假设我有 5 或 6 个项目，那么我只是希望这些项目具有响应性。如果该行只有足够的空间来显示每行 2 个项目，那么我希望每个项目继续移动到其上方的行下方。

如何做到这一点？

.flex-row {
  display: flex;
  @media screen and (min-width: 768px) {
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
  }
}

.flex-col {
  margin: 6px;
  padding: 16px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  color: white;
}

 <div class="flex-row">
    <div class="flex-col">Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.</div>
    <div class="flex-col">Seamlessly grow competitive.</div>
    <div class="flex-col">Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.</div>
    <div class="flex-col">Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.</div>
    </div>

当前结果

平板电脑上的预期结果

Answer 1

如果没有足够的空间，只需添加flex-wrap:wrap 以允许元素转到下一行，如果要控制何时发生中断，请考虑媒体查询：

.flex-row {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-col {
  margin: 6px;
  padding: 16px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  color: white;
  box-sizing:border-box;
}

@media (max-width:767px) {
  .flex-col {
    flex-basis: calc(50% - 12px);
  }
}

@media (max-width:460px) {
  .flex-col {
    flex-basis: 100%;
  }
}

<div class="flex-row">
  <div class="flex-col">Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.</div>
  <div class="flex-col">Seamlessly grow competitive.</div>
  <div class="flex-col">Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.</div>
  <div class="flex-col">Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.</div>
</div>

Answer 2

尝试添加一个
或将前两个 div 元素放入另一个带有 display: 块的 div 中。然后将接下来的两个 div 元素放在另一个带有 display: 块的 div 中。

<div class="flex-row">
<div style="display: block;">
<div class="flex-col">
Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.
</div>
<div class="flex-col">
Seamlessly grow competitive.
</div>
</div>
<div style="display: block;">
<div class="flex-col">
Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.
</div>
<div class="flex-col">
Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.
</div>
</div>
</div>

它应该可以工作...