Css 始终在3列中显示div，而不考虑它们在flex parent中的高度

我需要div总是显示在3列中，而不管它们在flex父级中的高度和div的数量（可以是10个或更多，但总是在3列中，在彼此的下面）我怎么做？代码平移示例

编辑：

<div class='main'>
<div class='div'>1</div>
<div class='div'>2</div>
<div class='div'>3</div>
<div class='div'>4</div>
</div>

.main {display:flex;flex-direction:row;background:silver;}
.div {width:33%; height:10px;background:gold;margin:10px;}

1.
2.
3.
4.
.main{显示：柔性；柔性方向：行；背景：银色；}
.div{宽度：33%；高度：10px；背景：金色；边距：10px；}

这里是我的示例-父flex div中有4个相等的div。无论父div中有多少div，我都需要将它们放在3列中（如果取前3位，则一列在另一列下面）

新编辑：另一个问题：这是我的代码：

---

问题是，如果一个或多个儿童DOV的高度与其他DOV不同，那么下面的div就不符合它的预期。它需要一些空间。请查看我的CODEPAN示例。我如何才能使KW内部div，无论其高度如何，都以相等的5px边距一个接一个地移动？

您必须给出父级

柔性包装：包装余量：10px，代码>和到div 30%而不是33%现在您将始终拥有一行3个div

甚至在
中加入内容的合理性：周围的空间
或
介于
之间，因此看起来更好


.main{显示：flex；flex方向：行；背景：银色；flex-wrap:wrap；对齐内容：空格；}
.div{宽度：30%；高度：10px；背景：金色；边距：10px；}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
希望您至少尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些额外的研究，要么通过谷歌，要么通过搜索，尝试一下。如果您仍然有问题，请返回您的代码，并解释您尝试了什么以及为什么它不起作用。您可以给出一些代码吗？我们可以提供帮助，但不能编写您的代码。请阅读我写的内容。请查看我的编辑并让我知道。请查看我更新的代码示例。这就是问题所在。我认为在flexbox中没有一种方法可以满足您的需求