两端对齐，每行3个，不确定性缺失一个

你可以用after伪元素来填充，宽度与正常元素一致即可，适合于一行中有三个元素的情况可以无差别处理。

在Web布局中时常碰到两端对齐的需求。在Flexbox布局中，时常在Flex容器中显式设置 justify-content 的值：

  1. .flex__container {
  2.     display: flex;
  3.     flex-wrap: wrap;
  4.     justify-content: space-between;
  5.     width: 100%;
  6. }

但在末尾行，如果和前面行的个数不相同（Flex项目）就会出现下图这样的效果：
两端对齐实践 - 图1
像上图这样的效果，并不是我们所需要的，因为我们希望在最后一行的Flex项目不足够排列满一行时，希望Flex项目一个紧挨一个的排列：
两端对齐实践 - 图2
在Flexbox要实现上图这样的效果，只需要在Flex容器中添加一个伪元素：

  1. .flex__container::after {
  2.     content: "";
  3.     display: flex;
  4.     flex: 0 1 32vw;
  5. }

注意，伪元素的 flex-basis 建议设置的和卡片的 flex-basis（或宽度）等同。这个时候你将看到像下面这样的示例：
两端对齐实践 - 图3

代码地址：https://codepen.io/robinson90/pen/ExPGMWd

两端对齐，不确定缺失数量

上面的布局方式只适合每行3个，可能确实一个的布局，但如果是每行4个或者更多，就不能只用一个伪元素来实现了。

这种情况下，需要使用flex的gap属性，但兼容性不好； 所以如果一定要用样式来解决，更推荐grid 

  1. .flex__container {
  2.       display:grid;
  3.           gap:20vh;
  4.             grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
  5. }

利用选择器，针对最后一行不同情况均做margin距离修正

  1.    li{
  2.      flex:0 1 20vw;
  3.     border:1px solid red;
  4.      /* 如果最后一行是3个元素 */
  5.         &:last-child:nth-child(4n - 1) {
  6.     margin-right: calc(20% + 20% / 3);
  7. }
  8.         /* 如果最后一行是2个元素 */
  9.         &:last-child:nth-child(4n - 2) {
  10.     margin-right: calc(40% + 20% / 3*2);
  11.      }
  12.   }

更多

更多灵活的方案可查看文章：https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/