justify：與右對齊的最后一個元素之間的空間

Question

有沒有辦法做到這一點（使用 flexbox 或其他）？

• 均勻分布的文本
• 但第一個和最后一個元素粘在兩側

我假設這需要對 flex 項目進行收縮包裝，這（我認為）是不可能的。

Answer 1

space-between將起作用 - 查看下面的示例：

 body { margin: 0; } * { box-sizing: border-box; } .wrapper { display: flex; justify-content: space-between; } .wrapper > * { border: 1px solid; }

 <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div>

另一種方法是在最后為項目使用auto邊距 - 但它有不同的效果 - 請參見下面的演示：

 body { margin: 0; } * { box-sizing: border-box; } .wrapper { display: flex; justify-content: space-around; } .wrapper > * { border: 1px solid; } .wrapper div:first-child { margin-right: auto; } .wrapper div:last-child { margin-left: auto; }

 <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div>

Answer 2

使用 flexbox，您可以使用justify-content屬性來定義項目的分發行為。

justify-content: space-around;

是你需要的就是你需要的。

這是一個例子： http : //codepen.io/fazermokeur/pen/WGJpJO

（直接受到這個關於 flexbox 的完美資源的啟發： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/）