如何右對齊彈性項目？ - How to Right-align flex item?

問題：

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute ? 與使用position: absolute相比，有沒有更多的flexbox-ish方式來使「 Contact」右對齊？

.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; }

<h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <!--<div class="b"><a href="#">Some title centered</a></div>--> <div class="c"><a href="#">Contact</a></div> </div>

http://jsfiddle.net/vqDK9/ http://jsfiddle.net/vqDK9/

---

解決方案：

參考一： https://stackoom.com/question/1W6o7/如何右對齊彈性項目
參考二： https://oldbug.net/q/1W6o7/How-to-Right-align-flex-item