flex布局一行三列，最后一行不足自動向前排實現

 

 

一行三列循環自適應，是移動端常見的布局

當使用display flex justify-content: space-between;最后一行只有兩個時候，會出現分居兩端，我們此時需要把最后一行改為向前布局

我的解決方案如下：

<div>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item"></p> // 在最后一項添加一個空塊
</div>

然后css

 

        .field-item:nth-last-of-type(1):nth-of-type(3n+1) {
          display: none;
        }

　　如果有更好的，也歡迎給出