Flex布局实现的三个按钮无法居中且存在异常右边距问题求助

解决方案 #

1. 移除冗余的右外边距配置
   你当前代码里.Button类明确设置了margin-right: 50px，这就是你看到的异常右外边距的来源。你已经用justify-content: space-evenly让flex容器自动分配子元素间距，额外设置的固定右外边距会和flex自动分配的空间叠加，最后一个按钮右侧会多出50px空白，直接导致整组按钮无法居中。
   你可以直接删除.Button中的margin-right: 50px配置即可解决该问题，修改后CSS如下：

#Buttons
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    min-height: 400px;
    margin: 0 auto !important;
}
    
.Button
{
    width: 200px;
    height: 200px;
    background-color: white;
}

2. 固定按钮间距的替代方案
   如果你需要按钮之间保持固定50px的间距，不需要flex自动分配间距，可以调整flex配置如下：

#Buttons
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 50px;
    align-items: center;
    text-align: center;
    min-height: 400px;
    margin: 0 auto !important;
}
    
.Button
{
    width: 200px;
    height: 200px;
    background-color: white;
}

3. 其他代码冲突排查方法
   如果修改后仍未生效，按以下步骤排查：

• 在CSS顶部增加全局样式重置，消除浏览器默认样式或其他全局样式的影响：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

• 打开浏览器检查工具，选中.Button元素，查看样式面板中margin-right的生效来源，确认是否有更高优先级的其他样式覆盖了你的配置。

内容的提问来源于stack exchange，提问作者Jan-Jaap Bol