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布局右对齐

猜你喜欢

转载自blog.csdn.net/qq_42289686/article/details/84836237