flexbox justify-self:flex-end不工作？

Question

我有一个布局,有时 "左"项缺失.在这种情况下,我仍然希望"正确"的项目是右对齐的.

我以为我可以这样做,justify-self但似乎并非如此.

是否有一个flexbox属性用于右对齐一个人的自我？

.row {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left,
.right {
  display: inline-block;
  background-color: yellow;
}

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

<div class="row">
  <!--<div class="left">left</div>-->
  <div class="right">right</div>
</div>

Answer 1

你可以使用margin-left: auto的right元素来代替.此外,当您display: flex在子元素display: inline-block上使用父元素时,将无法正常工作.

.row {
  border: 1px solid black;
  display: flex;
  align-items: center;
}
.left,
.right {
  background-color: yellow;
}
.right {
  margin-left: auto;
}

<div class="row">
  <!--<div class="left">left</div>-->
  <div class="right">right</div>
</div>