display flex not working with justify content in Edge browser

user_5082251 0
Viewed 192

I have following HTML in my page:

.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>

Now the output on Firefox is Button shift on right side of page but when on EDGE(version 92) its showing on left side, displex flex with justify-content is not working

flexbox css html
1 Answers

Looking at the MDN page for justify-content, it appears that there are slight semantic differences between end and flex-end, and that start and end are not currently implemented in Chrome/Edge. A potential workaround would be to switch to flex-end for now:

.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>

user_68313410
Related