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