Flexbox 在没有媒体查询的情况下包装嵌套行

Question

我在 flexbox 网格中有四个 div。我希望他们一次包装两个，像这样：

+-----------------------+
|  1  |  2  |  3  |  4  | 
+-----------------------+
+-----------+
|  1  |  2  |
+-----------+    THIS IS WHAT I WANT
|  3  |  4  |
+-----------+
+-----+
|  1  |
+-----+
|  2  |
+-----+
|  3  |
+-----+
|  4  |
+-----+

现在，这看起来很简单，只需将它们嵌套在新的 flex 容器中并应用 flex-wrap，并给单元格一些最小宽度。但是，这有一个副作用，使中间视图看起来像这样：

+-----------+
|  1  |  3  |
+-----------+    NOT WHAT I WANT
|  2  |  4  |
+-----------+

显然，flexbox 想要首先包装内部 div 而不是考虑它们的行。为了保持所有其他包装工作，为嵌套 div 设置 flex-basis（例如 100%）不是一个选项。为了保持一切动态（例如向其中一行添加第三个单元格），在单元格上设置 %-widths 不是一个选项。为了避免硬断点和（动态）内容宽度上的基本换行，我真的很想避免媒体查询。

这可以通过 flexbox 而没有媒体查询来实现吗？

JSFiddle

+-----------------------+
|  1  |  2  |  3  |  4  | 
+-----------------------+
+-----------+
|  1  |  2  |
+-----------+    THIS IS WHAT I WANT
|  3  |  4  |
+-----------+
+-----+
|  1  |
+-----+
|  2  |
+-----+
|  3  |
+-----+
|  4  |
+-----+

+-----------+
|  1  |  3  |
+-----------+    NOT WHAT I WANT
|  2  |  4  |
+-----------+

编辑：我知道我可以让内部.grid完全不包裹，但我真正想要的是如果空间非常紧张，所有单元格都可以相互包裹。（如第一个插图所示。）

Answer 1

您需要告诉 的子元素.grid .grid连续流动：

div {
  box-sizing: border-box;
  margin: 2px;
}

.grid {
  display: flex;
  flex-flow: row wrap;
  border: 2px solid blue;
  flex: 1;
}

.grid .grid {
  flex-flow: row; /* this is your fix */
}

.cell {
  flex: 1;
  min-width: 100px;
  border: 2px solid red;
  background: white;
  height: 100px;
}

<div class="grid">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
  </div>
  <div class="grid">
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
</div>