如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?

这个问题的表述其实就反应了我们对弹性布局某些属性的理解不充分,混用,乱用。哈哈,没关系,我就是要问这样错误的问题,因为太多人跟我一样会问这样错误的问题。
那么现在我们来解决吧。

错误效果展示:
如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?_第1张图片
这是相应css代码:

.topicWrap {
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.topicItem {
	width: 4.375rem;
	height: 1.875rem;
	text-align: center;
	line-height: 1.875rem;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(32, 119, 184, 1);
	border-radius: 15px;
	font-size: 14px;
	color: rgba(32, 119, 184, 1);
	margin: 0.3125rem 0.625rem;
}

我想要的效果是这样的:
如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?_第2张图片

.topicWrap {
	width: 100%;
	overflow: hidden;
	display: flex;
	/* justify-content: space-between; */  
	/* 删除子级在父级主轴上的对齐方式这一属性,直接用弹性换行就ok了 */
	flex-wrap: wrap;
}
.topicItem {
	width: 4.375rem;
	height: 1.875rem;
	text-align: center;
	line-height: 1.875rem;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(32, 119, 184, 1);
	border-radius: 15px;
	font-size: 14px;
	color: rgba(32, 119, 184, 1);
	margin: 0.3125rem 0.625rem;
}

大家看出区别了吗?
总结方法:大部分新手程序员在使用弹性布局的时候因惯性思维,display:flex;之后都会使用justify-content: space-between;配合设置子级对齐方式。这样往往会遇到要子级元素最后一排排列出现问题。所以这时就不要设置justify-content属性了,直接使用弹性换行flex-wrap:wrap,再给子元素设置margin-left,也可以达到效果想要的效果哦。当然具体问题具体考虑。在明确子元素个数的时候,直接用:nth-child(n)利用奇数偶数来选择元素单独设置一下也是?的。

心得:这是一个简单傻逼的问题,来源于没有真正研究弹性布局属性的新手问题。哎,其实研究了也不怎么样,曾经专门学习了弹性布局,但是实际开发过程中也用不到那么多属性,常用的也就那几个,多多总结问题,能够越来越顺利地开发,我觉得对于初级程序员来说就够了。

你可能感兴趣的:(web前端开发)