html - 2x2 flex 元素网格旁边的大型 flex 元素

Question

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

基本上是一个大的主箱，其余的都很小，形成一个迷你网格。

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

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

这是指向 fiddle 的链接.

Answer 1

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

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