css - flexbox自我证明:flex-end不起作用？

This question already has answers here:

What is the purpose of flex-start and flex-end on justify-items and justify-self?

(2个答案)



In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

(6个答案)


2年前关闭。




我有一个布局，其中有时缺少“左”项。在这种情况下，我仍然希望“正确”项目右对齐。

我以为我可以用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>

最佳答案

您可以改为在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>

关于css - flexbox自我证明:flex-end不起作用？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49658425/