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

当前结果

平板电脑上的期望结果

- usernameabc

---

你能展示一下你是如何处理断点的吗？ - stevensonmt

@KoshVery的背景已被替换为黑色。 - usernameabc

@MatthewStevenson 我已经添加了代码以包含媒体查询。 - usernameabc

@drupi17 请查看 https://dev59.com/9qbja4cB1Zd3GeqPj625 - stevensonmt

Answer 1

只需添加 flex-wrap:wrap 即可使元素在空间不足时换行，如果您想控制断点的发生，请考虑使用媒体查询：

只需将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>

- Temani Afif

---

@drupi17 在小型设备上是可以的，但并不总是这样。 - Temani Afif

这是我的问题。在小设备上，所有项目都会换行，符合预期，但在平板电脑上，我期望有两行，每行两个项目，但它们没有正常工作。 - usernameabc

由于某种原因，当我把它放在 JSFiddle 上时，它对我不起作用。 https://jsfiddle.net/7jn8hwbc/51/ - usernameabc

@drupi17 -- 尽管这段代码片段在这里显示正确，但在 jsfiddle 上，您似乎必须考虑边距和填充才能正确显示它。 - stevensonmt

@TemaniAfif 我之前没有在 flex-col 类上添加 flex: 1，但现在我已经添加了，你的解决方案可以工作了。 - usernameabc

Answer 2

尝试添加一个
或将前两个 div 元素放入另一个具有 display: block 的 div 中。然后将下面的两个 div 元素放入另一个具有 display: block 的 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>

它应该可以工作...

- Jishnu Raj

---

这可能有效，但我不相信这是真正的flexbox。在某些情况下，flex-row中可能有5或6个项目。我不能进入每一个来设置<div style: "display: block;">。 - usernameabc

如果你在使用PHP循环，那么并不会太难。 - Jishnu Raj

你在制作一个静态网页吗？它不会那么出色。 - Jishnu Raj

我们使用Drupal，因此不是静态页面。 - usernameabc