Html flexbox布局，其中一个项目固定在容器的每一侧

我希望使用flexbox创建一个类似下面代码段的布局，并维护一个平面层次结构，这意味着所有四个窗格都是同级的

我的第一个解决方案使用绝对定位，这不是flexbox，也不能在窗格之间提供良好的协同作用（重叠、“底层贴图”等）

我的第二个解决方案使用FrasBox，但是在中间行中使用左行和右窗格的3行，以及它们自己行中的顶部和底部窗格，因此层次结构有点混乱。

有办法做到这一点吗？如果不是，我应该如何最好地减轻第二个解决方案的混乱层次结构

解决方案#1（绝对位置，窗格无法很好地啮合）：

html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
文本对齐：居中；
}
#根{
背景颜色：蓝色；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
.托盘{
/*显示器：flex*/
/*证明内容：中心*/
/*对齐项目：居中*/
框大小：边框框；
位置：绝对位置；
背景色：红色；
边框：薄而实的黑色；
}
.托盘顶部{
最高：0%；
身高：20%；
宽度：60%；
}
.托盘底部{
底部：0%；
身高：20%；
宽度：60%；
}
.托盘左{
左：0%；
身高：60%；
宽度：10%；
}
.托盘对吗{
右：0%；
身高：60%；
宽度：10%；
}

顶部
左边
正确的
底部

只需将方向更改为行并添加换行：

html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
文本对齐：居中；
}
#根{
背景颜色：蓝色；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
身高：100%；
}
.托盘{
框大小：边框框；
背景色：红色；
边框：薄而实的黑色；
}
.托盘顶部{
身高：20%；
宽度：100%；
}
.托盘底部{
身高：20%；
宽度：100%；
}
.托盘左{
身高：60%；
宽度：10%；
}
.托盘对吗{
身高：60%；
宽度：10%；
}

顶部
左边
正确的
底部

只需将方向更改为行并添加换行：

html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
文本对齐：居中；
}
#根{
背景颜色：蓝色；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：之间的空间；
身高：100%；
}
.托盘{
框大小：边框框；
背景色：红色；
边框：薄而实的黑色；
}
.托盘顶部{
身高：20%；
宽度：100%；
}
.托盘底部{
身高：20%；
宽度：100%；
}
.托盘左{
身高：60%；
宽度：10%；
}
.托盘对吗{
身高：60%；
宽度：10%；
}

顶部
左边
正确的
底部

有办法做到这一点吗？如果不是，我应该如何最好地减轻第二个解决方案的混乱层次结构

绝对定位不是一个理想的解决方案，因为正如您所指出的，它会从文档流中删除窗格

Flexbox也不是很好，因为正如您所指出的，它向HTML结构添加了层

CSS网格布局可提供简洁的解决方案：

#根{
显示：网格；
网格模板列：重复（100，1vw）；
网格模板行：重复（100，1vh）；
高度：100vh；
背景颜色：蓝色；
}
.pane顶部{网格列：25/75；网格行：1/10；}
.pane底部{网格列：25/75；网格行：-1/-10；}
.pane左{网格列：1/10；网格行：25/75；}
.pane右{网格列：-1/-10；网格行：25/75；}
/*非必要的演示样式*/
.窗格{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
背景色：红色；
边框：薄而实的黑色；
}
正文{页边距：0；}
*{框大小：边框框；}

顶部
左边
正确的
底部

有办法做到这一点吗？如果不是，我应该如何最好地减轻第二个解决方案的混乱层次结构

绝对定位不是一个理想的解决方案，因为正如您所指出的，它会从文档流中删除窗格

Flexbox也不是很好，因为正如您所指出的，它向HTML结构添加了层

CSS网格布局可提供简洁的解决方案：

#根{
显示：网格；
网格模板列：重复（100，1vw）；
网格模板行：重复（100，1vh）；
高度：100vh；
背景颜色：蓝色；
}
.pane顶部{网格列：25/75；网格行：1/10；}
.pane底部{网格列：25/75；网格行：-1/-10；}
.pane左{网格列：1/10；网格行：25/75；}
.pane右{网格列：-1/-10；网格行：25/75；}
/*非必要的演示样式*/
.窗格{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
背景色：红色；
边框：薄而实的黑色；
}
正文{页边距：0；}
*{框大小：边框框；}

顶部
左边
正确的
底部

我应该少用误导性的常量。我希望这四个窗格被附加到各自的屏幕边缘，而不管大小。使用包装时，如果顶部和底部窗格的宽度不是100%（我希望支持这种情况），则这不起作用。我会用一个更好的例子来更新我的问题。我应该少用误导性的常量。我希望这四个窗格被附加到各自的屏幕边缘，而不管大小。使用包装时，如果顶部和底部窗格的宽度不是100%（我希望支持这种情况），则这不起作用。我将用一个更好的例子更新我的问题。