Flexbox混合全宽和半宽布局

Question

我在一个容器中有7个项目。如何使前3个全宽，接下来7个宽50％？

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

如果需要，我可以使用flexbox。在这个演示中，容器具有固定的宽度，但实际上它的响应布局使宽度变化。

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我试图实现的布局：

Answer 1

您可以将容器设置为width: 100%;

将前3个弹性项目设为width: 50%;，将最后4个项目设为.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%; }

<强> Updated Pen

＆＃13;

＆＃13;

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

＆＃13;

Vector

＆＃13;

＆＃13;

＆＃13;

Answer 2

在.item-4和item-5中创建两个子元素item-4-1，item-4-2，

然后.item-4, .item-5{display: flex}将完成工作

演示

.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 {
  
}
.item-4, .item-5{
  display: flex
}
.item-4 .sub-item, .item-5 .sub-item{
  width: 50%;
}
.item-4 .item-4-2{
  background: grey;
}

.item-5-1 {
  background: orange;
}
.item-5-2 {
  background: gold;
}

<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">
    <div class="sub-item item-4-1">4 <br> wrap</div>
    <div class="sub-item item-4-2">5</div>
  </div>
  <div class="item item-5">
    <div class="sub-item item-5-1">6</div>
    <div class="sub-item item-5-2">7</div>
  </div>
</div>