是否有比使用方法更靈活的“聯系人”右對齊方式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/
3 回答
鳳凰求蠱
TA貢獻1825條經驗 獲得超4個贊
干得好。設置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>
縹緲止盈
TA貢獻2041條經驗 獲得超4個贊
更加靈活的方法是使用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>
阿晨1998
TA貢獻2037條經驗 獲得超6個贊
如果您想為此使用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 上的演示，可讓您快速嘗試上述操作。
- 3 回答
- 0 關注
- 772 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消