使用flexbox的响应式磁贴布局

Question

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