In flexbox I can't put items to right using justify-self: flex-end;

Question

So i have been trying to make bar at the top with signout button and profile picture. but i want to make the signout button at flex-end but it doesnt work. heres my css code:

  display: flex;

  width: 100%;
  height: 30px;
  background-color: aqua;
  flex-direction: row;
}

.signout {
  justify-self: flex-end;
}

.profilepic {
  border: transparent;
  border-radius: 100px;
  justify-self: flex-start;
}

And my html

<div className={Styles.topbar}>
           <Image   width='30px' height='30px' className={Styles.profilepic} src={auth.currentUser.photoURL}></Image>
             <button  className={Styles.signout} onClick={signout}>Sign Out</button>
</div>

By the way i have specified height and width of profilepic in html because my framework doesnt allow me to define width&height in css.

Answer 1

You could do justify-content: space-between on the parent div, then remove the justify-self property on both .signout and .profilepic class.

Answer 2

  <div className={Styles.topbar}>
     <Image   width='30px' height='30px' className={Styles.profilepic} src={auth.currentUser.photoURL}></Image>
     <button  className={Styles.signout} onClick={signout}>Sign Out</button>
</div>

add style

    .topbar{ 
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 30px;
      background-color: aqua;
 }

    .signout {
    
    }
    
    .profilepic {
      border: transparent;
      border-radius: 100px;
      }