Html 如何设置嵌套flex显示的边距/填充？

我的主要成就是获得了如下图片：

因此，考虑到空间/填充物，我需要均匀地放置三个元素（div），其中黄色和绿色框的高度约为红色框的一半

我尝试使用设置为

行方向的
flex-display
执行此操作，该显示的第二个子项是另一个设置为
列方向的
flex-display
，其中包含两个框（div）

但是，正确地说，我能得到的是：


通过设置
红色框
和
列显示
的
填充
和
边距
，我能够均匀地填充
行显示
。
但我现在真的不知道如何填充
黄色
和
绿色
，只添加它们之间的垂直间隙而不打乱网格

这是我的html：



这是我的css：

.grid{
显示器：flex；
弯曲方向：行；
宽度：100%；
填充：10px；
}
#框1{
背景图片：url（“./img/red.png”）；
背景重复：无重复；
背景尺寸：封面；
边框样式：实心；
边框宽度：1px；
/*宽度：50%*/
柔性生长：1；
高度：20vw；
利润率：10px；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
/*宽度：50%*/
柔性生长：1；
裕度：10px；/*网格裕度*/
}
#框2{
背景图片：url（“./img/yellow.png”）；
背景重复：无重复；
背景尺寸：封面；
边框样式：实心；
边框宽度：1px；
宽度：100%；
/*身高：50%*/
柔性生长：1；
}
#框3{
背景图片：url（“./img/green.png”）；
背景重复：无重复；
背景尺寸：封面；
边框样式：实心；
边框宽度：1px；
宽度：100%；
/*身高：50%*/
柔性生长：1；
}

欢迎任何帮助。
只需在黄色元素中添加
页边距底部


.grid{
显示器：flex；
填充：10px；
}
#框1{
背景：红色；
边框样式：实心；
边框宽度：1px；
弹性：1；
高度：20vw；
利润率：10px；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
弹性：1；
利润率：10px；
/*网格边界*/
}
#框2{
背景：黄色；
边框样式：实心；
边框宽度：1px；
宽度：100%；
弹性：1；
保证金底部：20px；/*2倍保证金*/
}
#框3{
背景：绿色；
边框样式：实心；
边框宽度：1px；
宽度：100%；
弹性：1；
}

页边距顶部（#框3）/底部（#框2）：10px@VXp是的，您的解决方案和已接受的答案都可以。您可以使用一个flex容器/父容器来完成。是的，这很有效。我的错我没有想过。。。谢谢