Flex两端对齐，最后一行数量不够的问题

直接给解决方法：一行几个就在循环体后追加几个空标签

需求：

列表循环，一行四个，两端对齐

代码：

          ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li {
              width: 20vw;
            }
          }

效果：




问题：

尾行一个或四个的时候符合要求，尾行两个和三个时，排版不够美观

解决方案：

从网上找了一些相关的文章，最终效果都不符合要求，以下代码自行体会

1、末尾补一个
ul {
    &:after { 
        content: ""; 
        width:100px;
    } 
}

2、尾行去除flex样式
ul {
    &:after { 
        content: ""; 
        flex: auto; 
    } 
}

总结：

第二个直接pass，第一个方案只能解决一行三个，超过三个就不能用了，但同时也给了我很好的启发，补一个不行，那就补两个 。
（无脑解决：一行几个就补几个空标签）

            <ul>
              <li th:each="list"></li>
              <li></li><li></li>
            </ul>

在循环元素后补两个空元素，完美解决当前问题