Html css3当一个元素比另一个元素高出2倍时的柔性对齐

我有以下代码： 我使用弹性盒 我尝试做的是删除第三行和第二行之间不必要的空格（第八行元素比其他元素高2倍，第八行元素的顶部应该有第四行元素，左侧应该有第七行和第十一行元素，底部应该有15行元素）

.flex容器{
填充：0；
保证金：0；
列表样式：无；
宽度：900px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
弯曲方向：行；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：200px；
高度：150像素；
边缘顶部：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}
.弹性双件套{
高度：400px；
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

您应该将高度更改为最小高度

.flex容器{
填充：0；
保证金：0；
列表样式：无；
宽度：900px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
弯曲方向：行；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：200px；
最小高度：150px；
边缘顶部：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}
.弹性双件套{
最小高度：400px；
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

flexbox不能用作“网格系统”。。。我想这就是你想要的…我像这样过度工作（添加div包装器），但在这种情况下，第5、6、7和8个元素具有相同的高度，但只有8个元素应该具有2倍的高度