如何使用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

尝试添加一个

或者使用display: block将前两个div元素放入另一个div中。然后使用display: block将接下来的两个div元素放入另一个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>

应该行得通..。