灵活项目旁边2x2网格的大型弹性项目

Question

我正在尝试学习flexbox。这是我想要重现的布局：

基本上是一个大的主要盒子，其余的都很小，并创建一个迷你网格。

＆＃13;

＆＃13;

#test {
  display: flex;
}
.item {
  background-color: #444;
  padding: 5px 10px;
  margin: 5px;
  flex: 1 1 33%;
}
.item-1 {
  height: 50px;
}
.item-3 {
  order: 1;
}

＆＃13;

<div id="test">
  <div class="item item-1">
    A
  </div>
  <div class="item item-2">
    B
  </div>
  <div class="item item-3">
    C
  </div>
  <div class="item item-4">
    D
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是指向fiddle的链接。

Answer 1

＆＃13;

＆＃13;

#test {
  display: flex;
}
#test > div {
  flex: 0 0 48%;                /* width of first flex item in main container */
  height: 120px;
}
section {
  flex: 0 0 48%;                /* width of second flex item in main container */
  display: flex;                /* nested flex container to arrange smaller items */
  flex-wrap: wrap;              /* make container multi-line */
}
section > .item {
  flex: 0 0 40%;                /* width of smaller items; two max per row */
  height: 50px;
}
.item {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
}

＆＃13;

<div id="test">
  <div class="item">A</div>
  <section><!-- NEW; nested flex container -->
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;