如何右对齐弹性项目？

Question

是否有比使用方法更灵活的“联系人”右对齐方式position: absolute？

.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/

Answer 1

干得好。设置justify-content: space-between柔性容器上。.main {&nbsp;&nbsp; &nbsp; display: flex;&nbsp;&nbsp; &nbsp; justify-content: space-between;&nbsp; }.a, .b, .c { background: #efefef; border: 1px solid #999; }.b { text-align: center; }<h2>With title</h2><div class="main">&nbsp; &nbsp; <div class="a"><a href="#">Home</a></div>&nbsp; &nbsp; <div class="b"><a href="#">Some title centered</a></div>&nbsp; &nbsp; <div class="c"><a href="#">Contact</a></div></div><h2>Without title</h2><div class="main">&nbsp; &nbsp; <div class="a"><a href="#">Home</a></div><!--&nbsp; &nbsp; &nbsp;<div class="b"><a href="#">Some title centered</a></div> -->&nbsp; &nbsp; <div class="c"><a href="#">Contact</a></div></div>

Answer 2

更加灵活的方法是使用auto左页边距（与在块格式化上下文中使用时相比，灵活项对自动页边距的处理有些不同）。.c {&nbsp; &nbsp; margin-left: auto;}更新的小提琴：.main { display: flex; }.a, .b, .c { background: #efefef; border: 1px solid #999; }.b { flex: 1; text-align: center; }.c {margin-left: auto;}<h2>With title</h2><div class="main">&nbsp; &nbsp; <div class="a"><a href="#">Home</a></div>&nbsp; &nbsp; <div class="b"><a href="#">Some title centered</a></div>&nbsp; &nbsp; <div class="c"><a href="#">Contact</a></div></div><h2>Without title</h2><div class="main">&nbsp; &nbsp; <div class="a"><a href="#">Home</a></div>&nbsp; &nbsp; <!--<div class="b"><a href="#">Some title centered</a></div>-->&nbsp; &nbsp; <div class="c"><a href="#">Contact</a></div></div><h1>Problem</h1><p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Answer 3

如果您想为此使用flexbox，则应该能够做到这一点（display: flex在容器，flex: 1项目和text-align: right上.c）：.main { display: flex; }.a, .b, .c {&nbsp; background: #efefef;&nbsp; border: 1px solid #999;&nbsp; flex: 1;}.b { text-align: center; }.c { text-align: right; }...或更可替代地（甚至更简单），如果不需要满足这些条件，则可以justify-content: space-between在容器上使用并text-align完全删除规则：.main { display: flex; justify-content: space-between; }.a, .b, .c { background: #efefef; border: 1px solid #999; }这是Codepen 上的演示，可让您快速尝试上述操作。