flexbox中justify-self: flex-end不生效？如何单独右对齐元素？

你说得对，justify-self在Flexbox里确实不起作用——这个属性是为Grid布局设计的，Flexbox作为一维布局模型，根本不支持它。那要实现你要的效果，其实有个非常简单的办法：给.right元素设置margin-left: auto。

为什么这个方法有效？ #

在Flex容器中，margin: auto会自动占据容器内的剩余空间。当.left元素存在时，margin-left: auto会把.right元素推到容器右侧，效果和你原来用justify-content: space-between差不多；当.left元素缺失时，这个自动margin会占据容器左侧所有剩余空间，直接把.right顶到最右边，完美符合你的需求。

修改后的代码示例 #

.row { 
  border: 1px solid black; 
  display: flex; 
  align-items: center; 
  /* 可以去掉justify-content: space-between，margin-left:auto已经能实现类似效果 */
}
.left, .right { 
  display: inline-block; 
  background-color: yellow; 
}
.right { 
  margin-left: auto; /* 核心修改 */
}

<!-- 有.left元素的情况 -->
<div class="row">
  <div class="left">左边内容</div>
  <div class="right">右边内容</div>
</div>

<!-- 没有.left元素的情况 -->
<div class="row">
  <div class="right">右边内容</div>
</div>

补充说明 #

如果你一定要保留justify-content: space-between，其实也没问题——当.left存在时，两者会正常左右分布；当.left缺失时，只要给.right加上margin-left: auto，它依然会靠右对齐，不会因为space-between的存在而停留在左侧。

内容的提问来源于stack exchange，提问作者mpen