flex space-between最后一行对齐问题的解决方案

背景

常见的一个图文列表设计，一般是这样的，两端顶着容器，中间的间距平均分，以下图的某东商品列表的设计：

列表是这样自适应的，当视窗足够放多少个商品就放多少个，而后各个商品项目之间的间距平均分。因为每一个人的视窗均可能不一样，所以所看到的间距或者每一行的个数都会不一样。

方案

想到这种设计，咱们学过flex就知道，很是像flex的justify-content: space-between的效果，所以咱们天然这样实现：

.flex {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.demo1 > .flex__item {
  flex-basis: 200px;
  margin-top: 1rem;
  text-align: center;
  box-sizing: border-box;
}

.demo1 > .flex__item img {
  width: 100%;
}　　

 

<ul class="flex demo1">
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
</ul>

demo： https://jsbin.com/yulevutodo/edit?html,css,output

问题

咱们看到效果，最后一行不正确，应该向左对齐才对。

你们有什么好的解决方案（为了保证兼容性，因此不但愿用grid等）吗？

我有一个方案，可是总感受不是最佳的，但愿你们先本身想一想，而后再看个人方案，省得被我带偏了，如有不错的方案，但愿告知，多谢！

个人方案放在这边了：https://javascript.shop/2020/01/flex-space-between-last-row-alignment