如何右对齐弹性项目？

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 { 

    display: flex; 

    justify-content: space-between;

  }

.a, .b, .c { background: #efefef; border: 1px solid #999; }

.b { text-align: center; }

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

Answer 2

更加灵活的方法是使用auto左页边距（与在块格式化上下文中使用时相比，灵活项对自动页边距的处理有些不同）。

.c {

    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">

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

<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 {

  background: #efefef;

  border: 1px solid #999;

  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 上的演示，可让您快速尝试上述操作。