CSS: Layout: Implement: Flexbox: 1 row with item floating to right edge

 20th August 2020 at 2:19pm

在网站设计过程,经常会有这种单个元素向后浮动的情况(比如下图的「打开 App」)。

传统的做法是用 float: right,但是有了 flexbox 后,不再需要这么做了。你只需要用 justify-content: between。下面的示例使用 Tailwind CSS 提供的 utility 作演示:

<div class="flex justify-between w-64 border p-2 m-2">
  <div>Left Item</div>
  <div>Right item</div>
</div>

运行实例