Edge浏览器下display:flex搭配justify-content不生效如何解决？

justify-content: end 属于CSS Box Alignment Level 3规范定义的通用逻辑对齐值，可同时适配flex、grid等多种布局模型，Firefox对该属性的支持落地更早更完善，但Edge 92对应的Chromium内核版本对flex场景下的end值支持存在缺陷，因此出现跨浏览器对齐效果不一致的问题。

• 打开Edge 92的开发者工具（F12），选中.login-button-container元素，查看样式面板中justify-content: end是否被标记为无效属性值，若被划掉且有无效提示即可确认是兼容性问题
• 给容器临时添加border: 1px solid red; width: 100%;样式，确认容器本身已占满预期的整行宽度，排除容器宽度自适应收缩导致对齐无视觉差异的低级问题

方案1：兼容性替换（优先推荐） #

将justify-content: end替换为flex布局原生支持的flex-end值，该值从flex规范第一版发布起就被所有支持flex的浏览器兼容，包括Edge 92：

.login-button-container {
  display: flex;
  justify-content: flex-end;
}

方案2：兼容RTL布局场景 #

如果需要保留end逻辑属性适配从右到左的语言布局，可以叠加回退写法，旧版浏览器自动匹配flex-end，新版浏览器使用更通用的end：

.login-button-container {
  display: flex;
  justify-content: flex-end; /* 旧版浏览器兼容 */
  justify-content: end; /* 新版浏览器逻辑对齐 */
}

方案3：兜底替代方案 #

如果不想调整flex属性，也可以给容器添加传统对齐属性实现相同效果：

.login-button-container {
  text-align: right;
}

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