css中flex布局justify-content: space-bewteen时，最后一排怎么处理?

🌰举个栗子：

在box中有8个item。使用了flex布局，如下：

最后一行应该用元素把空余的位置填满。(可以使用空盒子或者伪元素)。

比如加两个empty盒子。注意这里的宽要设置成item的宽度才能够对齐。

.box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #666;
  flex-wrap: wrap;
}

.box .item {
    width: 200px;
    height: 200px;
    border: 1px solid green;
    background-color: green;
    margin: 10px 10px;
  }
.box .empty {
    width: 220px;
    height: 0;
  }

  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

在添加empty之前

在添加empty之后

如果你有其他方法也可解决这个问题，欢迎留言讨论呀😃~~~