解决flex布局最后一行元素对齐问题

实现效果

DIV布局

<div class="box">
    <div class="item">
      <div class="grid-content">1</div>
    </div>
    <div class="item">
      <div class="grid-content">2</div>
    </div>
    <div class="item">
      <div class="grid-content">3</div>
    </div>
    <div class="item">
      <div class="grid-content">4</div>
    </div>
    <div class="item">
      <div class="grid-content">5</div>
    </div>
    <div class="item">
      <div class="grid-content">6</div>
    </div>
    <div class="item">
      <div class="grid-content">7</div>
    </div>
    <div class="item">
      <div class="grid-content">8</div>
    </div>
    <div class="item">
      <div class="grid-content">9</div>
    </div>
    <div class="item">
      <div class="grid-content">10</div>
    </div>
    <div class="item">
      <div class="grid-content">11</div>
    </div>
    <div class="item">
      <div class="grid-content">12</div>
    </div>
    <div class="item">
      <div class="grid-content">13</div>
    </div>
    <div class="item">
      <div class="grid-content">14</div>
    </div>
  </div>

一. 元素均分，正好占满一行的情况

比如一行放四个div，则每一个div占据25%的width，就不用考虑最后一行了，直接开启flex布局，开启换行就可以了

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      flex-wrap: wrap;
    }
    .box .item {
      flex: 0 1 25%;
      border:1px solid #ccc;
      box-sizing: border-box;
    }
    .box .item .grid-content {
      background: gold;
      padding: 10px;
      border-radius: 10px;
    }
  </style>

二. 元素固定了大小，并不能完整的占据一行（文章主要考虑这种情况）

问题描述：比如一行放四个div，但是一个div的宽度只有22%，这样并不能占满一行，行尾会有12%的剩余空间，为了美观，使用了**justify-content: space-between;**让行内的元素两端对齐，然而这样引出了新的问题“最后一行的样式乱了”

1. 补位法（只讲思路，不贴代码了）

既然它需要四个div,才能占满最后一行，那么就在最后一行补满个数就好了

① 个数固定

如果明确知道最后一行要放四个div，但现在只有两个，那就手动添加两个空的div，div的宽度要与flex布局中的div的宽度一致。

② 个数不固定

像这样个数不固定的情况，出现的场景，比如这里显示的内容是从后端的提供的接口中获取的，无法知道最后一行要出现几个元素。那就只能通过js来计算了。

let cols = 4 // 每行要显示的div数
let listCount = 14 // 接口获取的列表长度（要显示的总的div数）
要补充的个数 = cols - (listCount %  cols )

2. （待补充）

还没遇到过其他更好更妙的方法，等见到了再补充