Html 如何使用flexbox制作四个基于视口的长方体？

我想让四个视图端口的宽度和高度为基础，而不是在纯CSS框相等

宽度必须比高度更大，并且需要响应

像这样：

我这样做：

html，正文{
宽度：100%；
身高：100%；
}
.集装箱{
填充：25px；
宽度：100%；
高度：计算（100vh-100px）；
位置：相对位置；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit盒包：证明；
-ms-flex-pack:justify；
证明内容：之间的空间；
}
.四号货柜{
宽度：80%；
保证金：0自动；
}
.盒子{
背景色：红色；
位置：相对位置；
身高：100%；
}
.盒子--四个{
宽度：47%；
身高：45%；
}

---

可以使用视口单位使高度和宽度相对于视口高度和宽度，然后仅使用边距在网格中的元素之间创建一致的檐槽

正文{
保证金：0；
}
.集装箱{
显示器：flex；
柔性包装：包装；
填充：1em 0 0 1em；
背景：黑色；
保证金：自动；
}
.盒子{
宽度：calc（50%-1米）；高度：calc（50vh-1.5米）；
背景：#171717；
利润率：0.1米1米0；
框大小：边框框；
}

.container{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.盒子{
宽度：40vw；
高度：20vw；
保证金：5px；
背景色：红色；
}