解决flex布局space-between 最后一行不对齐的问题

出现的问题：

方法一：给父级元素后面添加伪元素

在父盒子的样式里添加下列代码：

&::after {
					content: '';
					flex: auto;
				}

方法二：计算 

适用于每一行列数固定，且列宽度固定，需要进行计算，相比较复杂

方案： 对于最后一行的元素动态设置margin-right。判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小（剩余列宽度+剩余间隙大小）。假设元素宽度是$width，总间隙是 $space（盒子宽度-元素宽度*列数）。

计算公式： margin-right: calc( ($space / 间隙数) * 剩余列数 + $width * 剩余列数 )

三列布局

计算方法：

代码：

<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%) }

四列布局

计算方法：

/* 四列布局，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%) }