Html 垂直对齐柔性箱

我正在尝试使用flexbox将子元素放置在父元素中，如图所示->

我知道这是可能的，先做三列，然后使用flex，然后在第一列中使用flex列，并将另外两列垂直居中

问题是，我需要在一个父div中这样做。第四个元素被包装，它用第一个元素创建列，然后我需要垂直居中另外两个元素

这是我已经做过的：

代码在这里

要使用一个柔体，首先将“柔体方向”设置为“柱”，然后将“包裹”设置为“柔体包裹”

而且，需要在两条线上的零件具有可变高度，以避免断线

接下来，将flex属性设置为“无”，设置足够的边距以在需要在一条线上的零件中进行换行。这将强制弹性项目断开并保持项目的大小

弹性值 没有 项目的大小取决于其宽度和高度属性。它是完全不灵活的：相对于flex容器，它既不收缩也不增长。这相当于设置flex:0自动

身体{ 背景：番茄； 保证金：0； } .家长{ 显示器：flex； 证明内容：中心； 对齐项目：居中； 柔性流：柱包裹； 高度：100vh； } .孩子{ 宽度：30%； 高度：200px； 利润率：20px0； 背景：靛蓝； } /*加在下面*/ .子项：n+2类型的第n个{ 弹性：10 calc50%-40px； } /*加在下面*/ .子项：类型n+3的第n个{ flex：无； 利润率：50%0； }

---

谢谢你的回答：这个解决方案没有解决你的问题吗？如果是的话，请告诉我更多细节。是的，答案是有用的。但现在，例如，当我再添加两个div child 5和child 6时，我希望有两个div一个在另一个之上的列，就像在第一列中一样。谢谢您的时间和回答。我还有一个问题。是否有可能在一行中只包含1个或2个或3个孩子，然后，当有人添加下一个div时，它将换行到新行创建列，而另外两个div垂直居中。当添加第五个div时，它将创建第二列，最后一个div垂直居中。最后，第六个添加的div也是一样。请不要使用Codepen等外部站点来显示您的代码。相反，因为您的HTML和CSS足够简单，所以您可以将您的问题作为一个问题包含在代码中。