css - 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. 在第一个 flex 元素上使用 auto 边距。

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

   Revised Codepen

---

1. 在第二个 flex 元素上使用 auto 边距。

   .right { margin-left: auto; }
   

   Revised Codepen

---

有关justify-content 和auto margins，连同示例和插图，请参阅这篇文章:Methods for Aligning Flex Items along the Main Axis