有没有比使用更灵活的方法来右对齐“联系人”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/ http://jsfiddle.net/vqDK9/
更灵活的方法是使用auto左边距（弹性项目对待自动边距 http://www.w3.org/TR/css3-flexbox/#auto-margins与在块格式化上下文中使用时有点不同）。
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
