2

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

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
Pranjal
  • 463
  • 1
  • 7
  • 20

1 Answers1

1

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>
Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
  • Its working. Thanks. But can you explain what is the difference between end and flex-end. – Pranjal Aug 20 '21 at 13:42
  • @Pranjal - I wasn't able to completely understand it by looking at the MDN page, but there is [a SO post asking this same question regarding the difference between `end` and `flex-end`](https://stackoverflow.com/questions/54654050/difference-between-flex-end-and-end); at a glance, it appears that `end` is part of a new set of layout terms intended to be agnostic to the display type, and will eventually superseded/replace display-specific values such as `flex-end`. – Alexander Nied Aug 20 '21 at 13:50