HTML-Flexbox元素在保持填充的同时，独立于其他元素在中心对齐

我有一个flexbox设计的页面，可以在页面边缘放置按钮

如果到处都有按钮，则所有按钮都已就位：

html，
身体{
身高：100%；
保证金：0；
文本对齐：居中；
}
#根{
背景颜色：蓝色；
身高：85%；
宽度：85%；
}
.托盘{
框大小：边框框；
背景色：红色；
边框：薄而实的黑色；
}
.托盘顶部，
.托盘底部{
高度：48px；
线高：48px；
明确：两者皆有；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
.托盘左侧，
.托盘对吗{
宽度：48px；
高度：计算（100%-96px）；
浮动：左；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.托盘对吗{
浮动：对；
}
.按钮{
背景颜色：黄色；
宽度：46px；
高度：46px；
显示：内联块；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

除了在

之间使用
空格外，在中间元素上使用
边距：auto
：


html，
身体{
身高：100%；
保证金：0；
文本对齐：居中；
}
#根{
背景颜色：蓝色；
身高：85%；
宽度：85%；
}
.托盘{
框大小：边框框；
背景色：红色；
边框：薄而实的黑色；
}
.托盘顶部，
.托盘底部{
高度：48px；
线高：48px；
明确：两者皆有；
显示器：flex；
}
.托盘左侧，
.托盘对吗{
宽度：48px；
高度：计算（100%-96px）；
浮动：左；
显示器：flex；
弯曲方向：立柱；
}
.托盘对吗{
浮动：对；
}
.按钮{
背景颜色：黄色；
宽度：46px；
高度：46px；
显示：内联块；
}
.中{
保证金：自动；
}

2.
3.
5.
6.
7.
8.
9
11
12
您可以引入包装器元素进行定位，并将按钮放置在：


html，
身体{
身高：100%；
保证金：0；
文本对齐：居中；
}
#根{
背景颜色：蓝色；
身高：85%；
宽度：85%；
最小高度：236px；
}
.托盘{
框大小：边框框；
背景色：红色；
边框：薄而实的黑色；
}
.托盘顶部，
.托盘底部{
高度：48px；
线高：48px；
明确：两者皆有；
显示器：flex；
弯曲方向：行；
}
.托盘左侧，
.托盘对吗{
宽度：48px；
高度：计算（100%-96px）；
浮动：左；
显示器：flex；
弯曲方向：立柱；
}
.托盘对吗{
浮动：对；
}
.按钮{
背景颜色：黄色；
宽度：46px；
高度：46px；
显示：内联块；
}
.flex定位包装器{display:inline块；flex基：calc（100%/3）；display:flex；}
.flex定位包装器。开始{页边距底部：自动；页边距右侧：自动；}
.flex定位包装器。中间{margin:auto；}
.flex定位包装器.end{margin top:auto；margin left:auto；}

2.
3.
5.
6.
7.
8.
9
11
12
不使用CSS网格有什么原因吗？没有原因，我从flex开始，它变得越来越复杂，但不会比现在更复杂。看起来不错。一个问题：什么是
.tray.middle:first child:last child
for？@Daniel当中间元素单独存在时（第一个和最后一个同时存在），我们不进行任何转换还有一个问题：如果我移除第2框，第3框将向左浮动。我如何才能强制Box3保持正确？（框2可以在那里并且可以删除）@Daniel add
.tray.end:第一个子项：最后一个子项{margin left:auto；margin top:auto}
@Daniel也
.tray.begin:第一个子项：最后一个子项{margin right:auto；margin bottom:auto}