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

Question

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

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

如何实现这一目标？

＆＃13;

＆＃13;

.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;
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

当前结果

平板电脑上的预期结果

Answer 1

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

＆＃13;

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用display：block添加一个
或将前两个div元素放入另一个div中。然后将下两个div元素放在另一个div中，显示：block。

<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>

它应该有用......