是否有一种比使用绝对位置更灵活的方式来将“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/
如果你想使用flexbox，你应该能够，通过这样做(在容器上display: flex，在项目上flex: 1，在.c上text-align: right):
.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，并完全删除文本对齐规则:
.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
下面是Codepen上的一个演示，允许您快速尝试上述操作。
您也可以使用填充物来填充剩余的空间。
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
.filler{
flex-grow: 1;
}
我已经更新了3个不同版本的解决方案。这是因为讨论了使用额外填充元素的有效性。如果您运行剪切的代码，您会看到所有解决方案都做不同的事情。例如，在项目b上设置填充类将使该项填充剩余的空间。这样做的好处是没有不可点击的“死”空间。
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<div class="mainfiller">
<div class="a"><a href="#">Home</a></div>
<div class="filler b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<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>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>
更灵活的方法是使用自动左距(灵活项对待自动左距与在块格式化上下文中使用时略有不同)。
.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>
