柔性端自我调节: 柔性端不工作？

我有一个布局，其中 有时候的’左’项目丢失。在这种情况下，我仍然希望“右”项是右对齐的。

我认为我可以做到这一点与 justify-self，但似乎并非如此。

是否有一个灵活的属性为右对齐一个人的自我？

.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>

css
flexbox

104285 次浏览

小开

最佳答案

You could use margin-left: auto on right element instead. Also when you use display: flex on parent element display: inline-block on child elements is not going to work.

.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>