1. 程式人生 > >flex右對齊佈局,通常做導航欄比較多!

flex右對齊佈局,通常做導航欄比較多!

flex右對齊佈局
html程式碼

<div class="row nav_box">
	<div class="qx_1"><a href="">網站首頁</a></div>
	<div class="qx_1"><a href="">產品中心</a></div>
	<div class="qx_1"><a href="">走進黔鑫</a></div>
	<div class="qx_1"><a href="">新聞中心</a></div>
	<div class="qx_1"><a href="">案例中心</a></div>
	<div class="qx_1"><a href="">聯絡我們</a></div>
	<div class="move"></div>
</div>

CSS程式碼

.nav_box{
	height: 60px;
	position: relative;
	top: calc(50% - 30px);
	display: flex;
  	justify-content: flex-end;
  	align-items: flex-end;
}
.qx_1{
	display: flex;
	line-height: 60px;
	margin:0 5px 0 5px;
	padding: 0 10px 0 10px;
	font-size: 14px;
	position: relative;
}

效果圖:
以上程式碼有什麼不對的地方請指出,謝謝!
flex佈局右對齊