【css】解决flex布局最后一行个数不够不能平分空间

<div class="content">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
	<span class="item">4</span>
	<span class="item">5</span>
	<span class="item">6</span>
	<span class="item">7</span>
</div>

.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.item {
		width: calc(25% - 10px);
		height: 200px;
    margin-bottom: 20px;
    background: pink;
	}
}

以上是正常操作，然后就得到了：

利用伪类元素就可以达到我想要的效果，排列对齐：

.content:after {
  content: "";
  width: calc(25% - 10px);			// 宽就等于你设置的每个item的宽
}

如果span的个数是固定的，用上述方法就可解决；如果不固定，用grid布局

.content {
	display: grid;
    grid-template-columns: repeat(4, 1fr);		// 一行放4列
    gap: 10px;		// 每列和每行之间的间隔为10px

	.item {
		height: 200px;
	    background: pink;
	}
}