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时，子元素也不起作用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;