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

实现效果

DIV布局

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

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

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

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

问题描述：比如一行放四个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. （待补充）

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