Vue - flex布局 justify-content: space-around / space-between 最后一行元素不对其解决方案（JS）

前言

本文的解决方案不止适用于 Vue（只不过用它做示例），原生 JS 或其他框架均可借助该算法完成。

使用 flex 布局时，设置 justify-content: space-around / space-between 属性后，会出现如下图所示问题：

我们希望最后一行 居左对齐 排列，如下图所示：

解决方案

解决方案有很多种，本文使用 补齐元素 方式完成，而非 :after 插入或更改布局。

---

源代码

请直接全部复制以下代码，运行即可。

<!-- 该示例使用 vue 进行计算 | 当然其他框架或原生JS算法同理(只不过获取数据的方式不同而已) -->
<!-- 注意: 切勿在元素未渲染之前进行获取(否则会报错) -->
<