css - Flexbox 混合全宽和半宽布局

Question

我在一个容器中有 7 件元素。如何使前 3 个为全宽，而后 7 个为 50% 宽？

我还需要在视觉上位于同一行的元素具有相同的高度。

如有必要，我可以为此使用 flexbox。在此演示中，容器具有固定宽度，但实际上它是响应式布局，因此宽度会变化。

http://codepen.io/anon/pen/yJoPwK

.cont {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}
.item-1 {
  background: blue;
}
.item-2 {
  background: green;
}
.item-3 {
  background: yellow;
}
.item-4 {
  background: blue;
}
.item-5 {
  background: grey;
}
.item-6 {
  background: orange;
}
.item-7 {
  background: gold;
}
.item-4,
.item-5,
.item-6,
.item-7 {
  width: 50%;
}

<div class="cont">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4 <br> wrap</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
</div>

这是我试图实现的布局:

Answer 1

可以将容器设置为flex-flow: row wrap;

将前 3 个 flex 元素设置为 width: 100%;，将后 4 个元素设置为 width: 50%;

Updated Pen

.cont {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}

.item-1 { background: blue; }
.item-2 { background: green; }
.item-3 { background: yellow; }
.item-4 { background: blue; }
.item-5 { background: grey; }
.item-6 { background: orange; }
.item-7 { background: gold; }
.item-1, .item-2, .item-3 { width: 100%; }
.item-4, .item-5, .item-6, .item-7 { width: 50%; }

<div class="cont">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4 <br> wrap</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
</div>