带有 flexbox 的响应式磁贴布局 [重复]

Question

我想创建一个磁贴布局（类似于 Metro 风格的磁贴布局或所谓的 Windows 8）。所以我有一些瓷砖/盒子，有些是二次方的，有些可以是 sice 和二次方的两倍，有些可以有两倍的宽度。到目前为止一切都很好，但我有一个响应能力问题，我认为 flexbox 会为我解决......但也许我错了。

目前这些盒子的布局是这样的（箭头显示盒子应该“流动”的位置）：

但我希望它们看起来像这样：

甚至这样，如果在中间某处放置一个大图块（注意：编号也可能有点不同，例如大图块左侧的框可能是 1-4，然后大图块可能是5号，如果这更容易做到的话）：

这是我目前拥有的代码（见http://codepen.io/anon/pen/oXmraK）：

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

还有 CSS：

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

任何想法如何实现所需的布局？不知道没有 JS 是否可行，但我希望可以。

Answer 1

注意： 我下面的解决方案不是最理想的，应该被忽略。它是在我了解 CSS flex 或 grid 之前制作的，它们都为问题提供了完整而有效的解决方案。我会删除它，但无法删除已接受的答案。

---

您可以使用float: left 实现此目的，并且不需要flex 框。

http://jsfiddle.net/jqk207cz/3/

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

---

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

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

它仍然是响应式的纯 CSS。

http://jsfiddle.net/jqk207cz/4/