出现的问题：
方法一：给父级元素后面添加伪元素
在父盒子的样式里添加下列代码：
&::after {
content: '';
flex: auto;
}
方法二：计算
适用于每一行列数固定，且列宽度固定，需要进行计算，相比较复杂
方案： 对于最后一行的元素动态设置margin-right。判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小（剩余列宽度+剩余间隙大小）。假设元素宽度是$width，总间隙是 $space（盒子宽度-元素宽度*列数）。
计算公式： margin-right: calc( ($space / 间隙数) * 剩余列数 + $width * 剩余列数 )
三列布局
计算方法：
| 最后一个元素所处列数 | 剩余空间 | margin-right |
|---|---|---|
| 第二列（li:last-child:nth-child(3n - 1)） | 第三个元素宽度+剩余间隙 | ($space / 2) * 1 + $width * 1 |
代码：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
width: 30%;
margin-bottom: 20px;
height: 200px;
background: pink;
}
/* 三列布局，li宽度为30%，则剩余间隙：100% - 30% * 3 = 10% */
/* 如果最后一行是2个元素 calc(10% / 2 * 1 + 30% * 1) 可简化 */
ul>li:last-child:nth-child(3n - 1) { margin-right: calc(10% / 2 + 30%) }
四列布局
计算方法：
| 最后一个元素所处列数 | 剩余空间 | margin-right |
| 第二列（li:last-child:nth-child(4n - 2)） | 第三个元素宽度+第四个元素宽度+剩余间隙 | ($space / 3) * 2 + $width * 2 |
| 第三列（li:last-child:nth-child(4n - 1)） | 第四个元素宽度+剩余间隙 | ($space / 3) * 1 + $width * 1 |
/* 四列布局，li宽度为22%，则剩余间隙：100% - 22% * 4 = 12% */
/* 如果最后一行是2个元素 calc(12% / 3 * 2 + 22% * 2) 可简化 */
ul>li:last-child:nth-child(4n - 2) { margin-right: calc(24% / 3 + 44%) }
/* 如果最后一行是3个元素 calc(12% / 3 * 1 + 22% * 1) 可简化 */
ul>li:last-child:nth-child(4n - 1) { margin-right: calc(12% / 3 + 22%) }
