html - 等宽行上的两个 Flex 元素上方的一个 Flex 元素

Question

上面是我想要实现的布局。我知道如何在两种不同的颜色(蓝色和红色)上使用 Flexbox 来实现此目的，但是是否可以仅通过父容器上的 Flexbox 来实现此目的？

我的 fiddle :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>