如何右对齐弹性项目？

问题：

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/4276530