显示flex不能在Edge浏览器中对齐内容

Question

我的页面中有以下HTML:

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

<div class="login-button-container">
<button mat-raised-button color="primary">
<i class="fa fa-sign-in" style="margin-right: 2px;"></i>
Login
</button>
</div>

现在Firefox上的输出是Button shift在页面的右侧，但在EDGE(版本92)上显示在左侧，displex flex与justify-content不起作用

Answer 1

查看justify-content的MDN页面，似乎end和flex-end之间存在轻微的语义差异，并且start和end目前未在Chrome/Edge中实现。一个潜在的解决方法是现在切换到flex-end:

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

<div class="login-button-container">
<button mat-raised-button color="primary">
<i class="fa fa-sign-in" style="margin-right: 2px;"></i>
Login
</button>
</div>