Flexbox对齐到div的结尾

Question

如何使用flexbox将.right与div的最后对齐？

我的CSS：

div {
  display: flex;
  border: 1px dotted black;
}
.right {

}

HTML：

<div>
  <span>Left</span>
  <span class="right">Right</span>
</div>

Codepen Link

感谢。

Answer 1

三种方式：

1. 在容器上使用justify-content: space-between。

   div {
       display: flex;
       border: 1px dotted black;
       justify-content: space-between; /* new */
   }
   

   Revised Codepen

1. 在第一个弹性项目上使用auto边距。

   div > span:first-child { margin-right: auto; }
   

   Revised Codepen

1. 在第二个弹性项目上使用auto边距。

   .right { margin-left: auto; }
   

   Revised Codepen

有关 justify-content 和 auto margins 的说明以及示例和插图，请看这篇文章：Methods for Aligning Flex Items along the Main Axis

Answer 2

根据section 8.1中的CSS Flexible Box Layout Module，您可以使用auto页边距来定位元素。

在这种情况下，您可以添加margin-left: auto以便将元素放置在右侧。在这样做时，任何正的自由空间都会分布到元素的那一侧，这有效地将它定位到最右边，如下例所示。

div {
  display: flex;
  border: 1px dotted black;
}
.right {
  margin-left: auto;
}

<div>
  <span>Left</span>
  <span class="right">Right</span>
</div>

Answer 3

使用margin-left: auto; margin-right: 0;以便元素被推向右侧！你也有错字：

<span class="righ">Right</span>
<!---------------^ t missing.

请参阅工作代码段：

div {
  display: flex;
  border: 1px dotted black;
}
.right {
  margin-left: auto;
  margin-right: 0;
}

<div>
  <span>Left</span>
  <span class="right">Right</span>
</div>