关于flex两端对齐类似左右浮动

最新推荐文章于 2024-07-31 12:16:44 发布

_Lunay

最新推荐文章于 2024-07-31 12:16:44 发布

阅读量5.7k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/z9061/article/details/84858347

版权

CSS 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

		<div class="hot-header">
			<h3 class="title common-title left">热门楼盘</h3>
			<div class="right">全部<span class="icon">&gt;</span></div>
		</div>

    .hot-header{
    	display: flex;
    	flex-flow: row nowrap;
    	justify-content: space-between;
     }
	 .left {
		height: 30px;
	 }
	 .right {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		color: #9E9E9E;
	 }
	 .icon {
		margin-left: 8px;
	 }

关键样式

display: flex;

flex-flow: row nowrap;

justify-content: space-between;