flex布局中使用justify-self: flex-end无法将元素右对齐如何解决

justify-self 仅在Grid布局、块级布局、表格布局中生效，Flex行布局（flex-direction: row）的主轴对齐不支持该属性，所以你的设置不会生效。

只需要给登出按钮的样式新增 margin-left: auto 即可，不需要修改其他现有逻辑，也不会影响你在HTML标签内指定的图片宽高设置，修改后的CSS代码如下：

/* 父容器原有样式完全保留无需调整 */
.topbar {
  display: flex;
  width: 100%;
  height: 30px;
  background-color: aqua;
  flex-direction: row;
}

.signout {
  /* 删掉原本的justify-self: flex-end，新增下面这行即可 */
  margin-left: auto;
}

.profilepic {
  border: transparent;
  border-radius: 100px;
  /* 原本的justify-self: flex-start不生效，可以直接删除，头像默认就会在容器左侧 */
}

原理说明：Flex布局中给子元素设置自动margin会占用对应方向的所有剩余空间，给右侧登出按钮加margin-left: auto就会把所有主轴剩余空间都放在按钮左侧，自然将按钮推到容器最右端，正好匹配导航栏的布局需求。

内容的提问来源于stack exchange，提问作者Erdem Öztürk