使弹性项目包装到下一行，随后的项目继续该流程

Question

我希望红色框位于第二行，但随后我希望在其后定义的div继续第一行，以便所有黑色框实质上都包裹在黑色框周围。Flexbox可以实现吗？

它看起来应该像这样：

+---+---+---+---+---+
| 1 | 2 | 3 | 5 | 6 |
+---+---+---+---+---+
|         4         |
+---+---+---+---+---+
| 7 | 8 | 9 |10 |11 |
+---+---+---+---+---+
|12 |13 |
+---+---+

+---+---+---+---+---+
| 1 | 2 | 3 | 5 | 6 |
+---+---+---+---+---+
|         4         |
+---+---+---+---+---+
| 7 | 8 | 9 |10 |11 |
+---+---+---+---+---+
|12 |13 |
+---+---+

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.a {
  border: 1px solid black;
  height: 50px;
  width: 20%;
}

.b {
  border: 1px solid red;
  height: 50px;
  width: 100%;
}

参见https://codepen.io/anon/pen/OqqeJN

Answer 1

使用 CSS 网格来完成此任务将会有更好的运气：

\n

\r\n

\r\n

* {\n  box-sizing: border-box;\n}\n\n.container {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-auto-flow: dense; /* this will make the elements to flow around*/\n}\n\n.a {\n  border: 1px solid black;\n  height: 50px;\n}\n\n.b {\n  border: 1px solid red;\n  height: 50px;\n  /*full width row*/\n  grid-column: 1/-1;\n}

\r\n

<div class="container">\n  <div class=\'a\'>1</div>\n  <div class=\'a\'>2</div>\n  <div class=\'a\'>3</div>\n  <div class=\'b\'>4</div>\n  <div class=\'a\'>5</div>\n  <div class=\'a\'>6</div>\n  <div class=\'a\'>7</div>\n  <div class=\'a\'>8</div>\n  <div class=\'a\'>9</div>\n  <div class=\'a\'>10</div>\n  <div class=\'a\'>11</div>\n  <div class=\'a\'>12</div>\n  <div class=\'a\'>13</div>\n</div>

\r\n

\r\n

\r\n

\n

\n

稠密

\n

如果指定，自动放置算法将使用 \xe2\x80\x9cdense\xe2\x80\x9d 打包算法，如果稍后出现较小的项目，该算法会尝试先填充网格中的空洞。这可能会导致项目看起来无序，因为这样做会填补较大项目留下的漏洞。^参考

\n

\n