如何让ScoreClass div不受body flex布局影响并实现右对齐

实现方案 #

这里提供两种适配不同场景的解决方案：

方案1：完全脱离body的flex布局（最推荐，适配游戏分数悬浮场景）

直接给ScoreClass设置绝对定位，该元素不会参与flex布局的计算，也不会影响其他元素的居中状态，可以固定在你想要的右上角位置：

.ScoreClass {
  position: absolute;
  top: 20px; /* 可自定义距离顶部的间距 */
  right: 20px; /* 可自定义距离右侧的间距 */
  color: #fff; /* 按需补充其他样式 */
}

方案2：保留在flex布局内，仅调整对齐方式

如果你的需求是三个body子元素在同一行排列，仅让ScoreClass靠右，可给该元素设置自动左外边距，吃掉flex主轴的剩余右侧空间实现右对齐：

.ScoreClass {
  margin-left: auto;
  color: #fff;
}

注意该方案会挤压中间MenüCenter元素的空间，导致其无法完全基于视口居中，仅适合行内多元素依次排列的场景。

另外你当前的HTML代码里存在一个多余的闭合</div>标签（在id="spaceholder"的canvas标签下方），没有对应的起始div标签，建议删除避免出现未知布局异常。

内容的提问来源于stack exchange，提问作者TheJoniii