使用flexbox的响应式磁贴布局

Question

我想创建一个tile布局（类似于metro风格的tile布局或者它所谓的Windows 8）。所以我有一些瓷砖/盒子，有些是二次的，有些可以是sice和quadratic的两倍，有些可以有两倍的宽度。到目前为止一切都那么好，但是我有一个响应性的问题，我认为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/