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>

谢谢。

Answer 1

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

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

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

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

Answer 2

使用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>

Answer 3

三种方式：

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

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

在第一个弹性项目上使用 auto 个边距。
```
div > span:first-child { margin-right: auto; }
```
Revised Codepen

justify-content和auto margins的解释，连同示例和插图，请参阅此 post：

Flexbox alignment to end of div