等宽行上的两个伸缩项目上方有一个伸缩项目

Question

以上是我要实现的布局。 我知道如何在两个单独的颜色（蓝色和红色）上使用flexbox实现此目的，但是仅在父容器上使用flexbox可以实现此目的吗？

我的小提琴： https : //jsfiddle.net/jzhang172/ux0h69kw/

 .container{ display:flex; justify-content:center; align-items:stretch; width:100%; flex-direction:column; } .one{ height:300px; width:100%; background:blue; } .two{ width:50%; height:300px; background:red; } *{ margin:0px; padding:0px; } 

 <div class="container"> <div class="one"> </div> <div class="two"></div> <div class="two"></div> </div> 

Answer 1

使用多行行布局而不是列：

.container {
  flex-flow: row wrap;
}

 * { margin: 0px; padding: 0px; } .container { display: flex; flex-wrap: wrap; } .one { height: 300px; width: 100%; background: blue; } .two { height: 300px; width: 50%; background: red; } 

 <div class="container"> <div class="one"></div> <div class="two"></div> <div class="two"></div> </div> 

一旦浏览器开始在flexbox中支持强制中断，您就不需要宽度了。

 * { margin: 0px; padding: 0px; } .container { display: flex; flex-wrap: wrap; } .one, .two { height: 300px; flex: 1; } .one { background: blue; page-break-after: always; /* CSS 2.1 syntax */ break-after: always; /* New syntax */ } .two { background: red; } 

 <div class="container"> <div class="one"></div> <div class="two"></div> <div class="two"></div> </div> 

Answer 2

这就是您所需要的，它显示为：

.container {
    display: flex;
    flex-direction: column;
}

.one {
    flex: 0 0 300px;
    background: blue;
}

.two {
    flex: 0 0 150px;
    background: red;
}

修改后的演示