【CSS】巧用伪类占位解决奇数个数据时的弹性盒排列出错问题

场景：

遍历请求来的数据，使用弹性盒布局，左右各一份并且换行，并且使用justify-content:space-around。
拉到最后一个显示的数据，发现最后一个图片理应另起一行显示在左边，但是发现图片孤零零的被置于中间，严重影响美观。

原因：

因为奇数个数据在使用弹性盒排列时，必然会出现有尾巴另起一行显示，此时justify-content:space-around作用于该图片，出现错位。

解决办法：

我们可以巧用伪类，来达到占据空白处，不让孤零零的尾巴被挤压至中间

// 展示列表
.showList
	display flex
	flex-wrap wrap
	justify-content space-around
	// 父级引用，&当前位置的父级
	// 添加一个伪类，内容为空白并且宽度和其他遍历的对象一样宽。
	&:after
		content ''
		width 46%
	// 遍历的内容容器
	.showItem
		width 46%
		// 图片
		image
			width 100%
			height 290rpx
		// 产品描述
		view
			line-height 50rpx
			font-size 26rpx
		// 产品价格
		.price
			color red
			font-weight bolder