flex布局设置justify-content换行的问题

html
<div class="list">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
 
  <div class="empty"></div>
  <div class="empty"></div>
</div>

css
.list {
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
 
.item {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid green;
}
 
.empty {
  box-sizing: border-box;
  width: 100px;
  height: 0;
}