1.使用占位元素
特点：适用于任意列数布局，比较简单，缺点是会产生空标签
方法：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0
<div class="flex-box"><div class="item-box" v-for="item in 4" :key="item"></div><!-- 假设一行有3列，即3个元素 --><div v-for="temp in 3" :key="temp + 't'" class="temp-box"></div>
</div>.flex-box {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;
}
.flex-box .item-box {width: 30%;height: 200px;margin-bottom: 20px;background: pink;
}
.flex-box .temp-box {width: 30%;height: 0;margin: 0;
}2.给父级元素后面添加伪元素
特点：只针对三列布局
方法：通过 ::after 选择器，给父元素添加伪元素
<div class="flex-box"><div class="item-box" v-for="item in 5" :key="item"></div>
</div>.flex-box {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;
}
.flex-box .item-box {width: 30%;height: 200px;margin-bottom: 20px;background: pink;
}
.flex-box:after {content: '';width: 30%;
}3.计算方式
特点：适用于每一行列数固定，且列宽度固定，需要进行计算，相比较复杂
方法：对于最后一行的元素动态设置 margin-right。判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小(剩余列宽度 + 剩余间隙大小)。假设元素宽度是 $width，总间隙是 $space(盒子宽度 - 元素宽度 * 列数)
计算公式：margin-right: calc( ($space / 间隙数) * 剩余列数 + $width * 剩余列数)
三列布局
计算公式：宽度为30%，则剩余间隙：100% - 30% * 3 = 10%
<div class="flex-box-3"><div class="item-box" v-for="item in 5" :key="item"></div>
</div>/* 计算方式(三列布局) */
.flex-box-3 {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;
}
.flex-box-3 .item-box {width: 30%;height: 200px;margin-bottom: 20px;background: pink;
}
/* 三列布局：宽度为30%，则剩余间隙：100% - 30% * 3 = 10% */
/* 最后一行是2个元素 */
.flex-box-3 .item-box:last-child:nth-child(3n - 1) {margin-right: calc(10% / 2 * 1 + 30% * 1);
}四列布局
计算公式：宽度为22%，则剩余间隙：100% - 22% * 4 = 12%
<div class="flex-box-4"><div class="item-box" v-for="item in 5" :key="item"></div>
</div>/* 计算方式(四列布局) */
.flex-box-4 {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;
}
.flex-box-4 .item-box {width: 22%;height: 200px;margin-bottom: 20px;background: pink;
}
/* 四列布局：宽度为22%，则剩余间隙：100% - 22% * 4 = 12% */
/* 最后一行是2个元素 */
.flex-box-4 .item-box:last-child:nth-child(4n - 2) {margin-right: calc(12% / 3 * 2 + 22% * 2);
}
/* 最后一行是3个元素 */
.flex-box-4 .item-box:last-child:nth-child(4n - 1) {margin-right: calc(12% / 3 * 1 + 22% * 1);
}五列布局
计算公式：宽度为18%，则剩余间隙：100% - 18% * 5 = 10%
<div class="flex-box-5"><div class="item-box" v-for="item in 7" :key="item"></div>
</div>/* 计算方式(五列布局) */
.flex-box-5 {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;
}
.flex-box-5 .item-box {width: 18%;height: 200px;margin-bottom: 20px;background: pink;
}
/* 五列布局：宽度为18%，则剩余间隙：100% - 18% * 5 = 10% */
/* 最后一行是2个元素 */
.flex-box-5 .item-box:last-child:nth-child(5n - 3) {margin-right: calc(10% / 4 * 3 + 18% * 3);
}
/* 最后一行是3个元素 */
.flex-box-5 .item-box:last-child:nth-child(5n - 2) {margin-right: calc(10% / 4 * 2 + 18% * 2);
}
/* 最后一行是4个元素 */
.flex-box-5 .item-box:last-child:nth-child(5n - 1) {margin-right: calc(10% / 4 * 1 + 18% * 1);
}依次类推，当列数为6、7、8、9… 时，同样按照上述方式计算
)
