flex右对齐布局，通常做导航栏比较多！

qq_42289686

于 2018-12-05 14:55:24 发布

阅读量8.9k

点赞数 3

分类专栏： HTML 文章标签： flex布局导航栏

本文链接：https://blog.youkuaiyun.com/qq_42289686/article/details/84836237

版权

HTML 专栏收录该内容

36 篇文章

订阅专栏

本文分享了使用Flex布局实现导航栏元素右对齐的方法，通过CSS代码展示具体实现细节，包括justify-content和align-items属性的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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