Flexbox 2x2网格问题

Question

我正在尝试使用CSS实现如下所示的设计。不幸的是我所有的努力都毫无价值。无论我尝试什么，它总是似乎只适用于一行（只有2个div）而不是两行。我正在使用wrap属性。我做错了什么？

编辑：在这种情况下我不能使用嵌套的flexboxes

期望的外观：

<div style="width:400px;height:100%;background:#cacaca;
    display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
">
<div style="width:200px;height:200px;background:#ff0000"></div>
<div style="width:100px;height:100px;background:#999;"></div>
<div style="width:100px;height:100px;background:#666;"></div>
<div style="width:100px;height:100px;background:#444;"></div>
<div style="width:100px;height:100px;background:#222;"></div>


</div>

Answer 1

我不确定这是不是你想要的，只需要包装四个100px div。

<div style="width:400px;height:100%;background:#cacaca;
    display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
">
    <div style="width:200px;height:200px;background:#ff0000"></div>
    <div style="width:200px;height:200px;background:#ff0000
                display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;">
        <div style="width:100px;height:100px;background:#999;"></div>
        <div style="width:100px;height:100px;background:#666;"></div>
        <div style="width:100px;height:100px;background:#444;"></div>
        <div style="width:100px;height:100px;background:#222;"></div>
    </div>
</div>

Answer 2

使用嵌套的flexbox。

＆＃13;

＆＃13;

ERROR: 18:28  deprecation  JQueryEventObject is deprecated.

＆＃13;

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 400px;
}

.row:not(:last-child) {
  margin-bottom: 1em;
}

.bigbox {
  width: 200px;
  height: 200px;
  background: #ff0000;
}

.boxes {
  width: 200px;
  height: 200px;
}

div[class^="small"] {
  width: 100px;
  height: 100px;
  float: left;
}

.small-999 {
  background: #999;
}

.small-666 {
  background: #666;
}

.small-444 {
  background: #444;
}

.small-222 {
  background: #222;
}

＆＃13;

＆＃13;

＆＃13;