Html 使用“弯曲方向：列”垂直居中不同高度的内容

我正在尝试使用具有不同指定高度的div的

flex-direction:column

创建布局。如果为共享同一flexbox父对象的div指定不同的高度，我会发现垂直对齐消失

我尝试了使用

对齐项目

，

对齐内容

，

对齐内容

的各种组合，但均无效。我使用了

flex-grow

代替高度规则，这也没有效果。我能使内容垂直居中的唯一方法是使所有项目的相对高度相同

标题{
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
文本对齐：居中；
高度：40公分；
背景色：#badabf；
}
.网站名称{
高度：32em；
背景色：#DEA5A4；
}
.网站导航{
高度：8em；
背景色：#AEC6CF；
}

我是一个网页标题

flex格式上下文的范围是父子关系

换句话说，flex布局只存在于flex容器及其子容器之间

子代以外的子代不参与flex布局

您针对的元素是flex项（

.site title

）的子元素，因此flex属性不适用

您必须将flex项放入flex容器中，以使flex属性在HTML结构中更深入地工作

标题{
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
文本对齐：居中；
高度：40公分；
背景色：#badabf；
}
.网站名称{
高度：32em；
背景色：#DEA5A4；
显示：flex；/*新*/
弯曲方向：列；/*新*/
对齐项目：居中；/*新建*/
对齐内容：中心；/*新建*/
}
.网站导航{
高度：8em；
背景色：#AEC6CF；
}

我是一个网页标题

谢谢你，我也是在经历了多次头部撞击后得出这个结论的。给我带来最大麻烦的总是简单的答案或问题。