我的布局有时缺少“左”项目。在这种情况下,我仍然希望“正确”项目右对齐。
我以为可以做到这一点,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
on 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] 删除。
我来说两句