Align an element to the right side of the flexbox with flexbox

Question

Problem:

Im trying to put my change button to the end of the flexbox, but its always with the title.

What ive tried

1.Ive tried to put the button in a div.
2.Ive tried all the alinge statements.
3.Ive put an !Important behind the aling statements

How it is

image how it is currently

How it should be

image how it should be

What im using

Angular: 10.1.6

Code

Html

<div class="flexboxTitleandChangeButton">
 <h1 style="margin-top: 10px">{{ projekt?.titel }}</h1>
 <button class="flexboxChangeButton" sbbButton [mode]="'secondary'">Change</button>
</div>

SCSS

.flexboxTitleandChangeButton {
 display: flex;
 justify-content: flex-start;
}
.flexboxChangeButton{
 margin-top: 20px;
 align-items: flex-end !important;
}

For class .flexboxTitleandChangeButton just change justify-content: 'space-between'; — Sujit, Nov 23 '20 at 11:05

score 0 · Accepted Answer · answered Nov 23 '20 at 10:46

The only thing you need to have is display: flex; on the .flexboxTitleandChangeButton div and margin-left: auto on the 'Change' button.

It will then be positioned to the far right on the screen. The rest of the code can be removed (is not needed).

Side note: Nice starting point in code you provided.

.flexboxTitleandChangeButton {
  display: flex;
}

.flexboxChangeButton {
  margin-left: auto;
}

<div class="flexboxTitleandChangeButton">
  <h1 style="margin-top: 10px">{{ projekt?.titel }}</h1>
  <button class="flexboxChangeButton" sbbButton [mode]="'secondary'">Change</button>
</div>