flexbox自我证明:flex-end不起作用? [英] flexbox justify-self: flex-end not working?

问题描述

我有一个布局，其中有时 缺少左"项.在这种情况下，我仍然希望'right'项右对齐.

I have a layout where sometimes the 'left' item is missing. In such cases, I still want the 'right' item to be right-aligned.

我以为我可以使用 justify-self 来做到这一点，但事实并非如此.

I thought I could do this with justify-self but that doesn't appear to be the case.

是否有一个flexbox属性可以使自己的右对齐?

Is there a flexbox property for right-aligning one's 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>

推荐答案

您可以在 right 元素上使用 margin-left:auto .同样，当您在父元素上使用 display:flex 时，在子元素上使用 display:inline-block 也无法正常工作.

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>

这篇关于flexbox自我证明:flex-end不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！