Html 具有flexbox的响应性瓷砖布局

我想创建一个平铺布局（类似于metro风格的平铺布局或Windows 8的所谓布局）。所以我有一些瓷砖/盒子，一些是二次的，一些可以是sice和二次的两倍，一些可以是宽度的两倍。到目前为止还不错，但我认为flexbox可以为我解决响应性方面的问题。。。但也许我错了

当前，框的布局如下（箭头显示框应“流动”的位置）：

但我想让他们看起来像这样：

或者甚至这个，如果一个大的瓦片被放置在中间的某个地方（注：编号也可以有点不同，例如，大瓦片左边的盒子可以是1-4个，然后大瓦片可以是5号，如果这更容易做的话）：

这是我目前拥有的代码（请参阅）：

你有什么想法可以实现你想要的布局吗？不知道没有JS这是否可行，但我希望是这样。

注意：我下面的解决方案不太理想，应该忽略。它是在我了解CSS flex或grid之前编制的，这两种技术都为这个问题提供了完整而高效的解决方案。我会删除它，但不能删除已接受的答案

---

您可以使用

float:left

实现这一点，而不需要

flex

框

---

更新（基于修订后的问题）

在开始时获得四个框的一个解决方案是为该部分创建一个单独的容器

它仍然是响应灵敏的纯CSS

---

谢谢，这解决了方案1，但不幸的是，这并不是理想的方案2（请参见编辑），在该方案中，一开始没有放置更大的磁贴。如果可以解决这个问题，或者我需要进行一些繁重的计算，或者使用JavaScript进行放置，有什么想法吗？布局应该是响应性的。框是从列表中动态生成的，因此如果我添加新项目或更改其大小，布局应始终适应，并且如果浏览器窗口已调整大小，等等。您可以尝试jQuery砌体吗。可能它也会帮助您了解Freewall（也基于jQuery）。我无法从纯css中获得这种类型的行为

<div class="container">
  <div class="bigbox">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
  <div class="widebox">Box 8</div>
  <div class="box">Box 9</div>
  <div class="box">Box 10</div>
  <div class="box">Box 11</div>
  <div class="box">Box 12</div>
  <div class="box">Box 13</div>
  <div class="box">Box 14</div>
  <div class="box">Box 15</div>
  <div class="box">Box 16</div>
  <div class="box">Box 17</div>
  <div class="box">Box 18</div>
  <div class="box">Box 19</div>
</div>

.container {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
}

.box, .bigbox, .widebox {
  background-color: olive;
  width: 100px;
  height: 100px;
  margin: 5px;
}

.bigbox {
  background-color: olive;
  width: 210px;
  height: 210px;
}

.widebox {
  background-color: olive;
  width: 210px;
  height: 100px;
}

.container {
 /* REMOVE THIS BLOCK
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch; */

}

.box, .bigbox, .widebox {
  background-color: olive;
  width: 100px;
  height: 100px;
  margin: 5px;
  float: left; /* NEW */
}

.bigbox {
  background-color: olive;
  width: 210px;
  height: 210px;
}

.widebox {
  background-color: olive;
  width: 210px;
  height: 100px;
}