异常的flexbox行为

Question

晚上好，对不起，我的英语不好，所以我使用flexbox将项目居中放置在div的中间，在插入项目时，我还使用flex wrap换行，但是在插入项目时某些包装线中断将物品放下而不是将每个人都放在中间，这很常见吗？

我希望它们都位于div的中心，而不是第一行和第二行之间没有空格，为什么会发生这种情况？我可以得到预期的结果吗？

.container{
  width: 808px;
  height: 690px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  display: flex;
}

.productContainer {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
}
.photo{
  width: 160px;
  height: 160px;
  margin: 4px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  background: blue;
}

<div class="container">
  <div class="productContainer">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
  </div>
</div>