Html 如何在此布局中以列而不是行的形式添加新的flex元素？

我正在尝试构建一个如下所示的布局：

部分{
显示器：flex；
柔性包装：包装；
}
div{
宽度：30vw；
高度：20vw；
背景：花白；
保证金：0 5vw 10vh 5vw；
}
div：第一种类型{
左边距：0；
}

---

在CSS中更改此选项：

section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

---

我遇到的问题是，您需要在

上指定一个高度，这样新列将显示在右侧而不是下方

部分{
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
溢出-x：自动；
高度：100vh；
}
div{
宽度：30vw；
高度：40vh；
背景：花白；
保证金：0 5vw 10vh 5vw；
}
分区：第n个类型（2n+1）{
左边距：0；
}