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

mpen:

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

我以为可以做到这一点,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>

内纳德·弗拉卡(Nenad Vracar):

您可以改用margin-left: autoon 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章