Flexbox网格：两个相等长度的行，顶行分为两列

Question

我正在尝试使用css flexbox制作如下图所示的布局。

但是我对flexbox不是很熟悉，任何人都可以帮助我做到这一点？

以下是我正在尝试的内容：

.row.flex {
    display: flex;
 }

 .row [class=^"col-"] {
 	width: 200px;
 	height: 100%;
 }

<div class="row flex">
	<div class="col-xs-12 col-sm-6">
		
	</div>
	<div class="col-xs-12 col-sm-6">
		
	</div>
	<div class="col-xs-12 col-sm-12">
		
	</div>
</div>

谢谢：）

Answer 1

选项1

将弹性容器设置为wrap。

使每个弹性项目占用50％的空间。使用calc调整边距。

第三个项目被强制换行，获得flex-grow: 1，因此会占用剩余空间。

.row.flex {
    display: flex;
    flex-wrap: wrap;
 }

 .row [class^="col-"] {
    flex: 0 0 calc(50% - 10px);
    height: 100px;
    margin: 5px;
    background-color: lightgreen;
 }
 
 .row [class^="col-"]:last-child {
     flex-grow: 1;
 }

<div class="row flex">
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-12"></div>
</div>

选项2

将弹性容器设置为wrap。

为每个弹性项目提供足够的宽度，每行只允许两个。

为每个项目提供消耗剩余空间的能力。

.row.flex {
    display: flex;
    flex-wrap: wrap;
 }

 .row [class^="col-"] {
    flex: 1 0 35%;
    height: 100px;
    margin: 5px;
    background-color: lightgreen;
 }
 

<div class="row flex">
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-12"></div>
</div>