最好的解决方案是在flex项目的水平边距上使用margin: auto，如下所示：

.flexbox {
       background-color: pink;
       display: flex;
       justify-content:  space-between;
       flex-wrap: wrap;
    }
    .flex-item {
       width: 175px;
       height: 175px;
       background-color: grey;
       margin: 10px auto;
    }

个字符
唯一的问题可能是，如果最后一行包含多个项目，但不足以填满整行，则最后一行项目之间将存在大量空间。

你好像同时在追求两种行为。我已经成功地在容器上使用了justify-content: center和flex-wrap: wrap，并在子元素上设置了适当的左右边距。然后在容器上应用与负边距相同的量，子元素的边缘将与容器对齐。

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -3rem;
}

.child {
    align-self: center;
    margin: 0 3rem 6rem 3rem;
}

字符串

justify-content: space-between;将始终将每一行的项推开到容器的边缘。另一行上的任何元素都不会居中。
我已经成功地使用了负利润率，但这意味着您需要显式地设置这些利润率：
JS Fiddle example
超文本标记语言

<div class="grid">
  <div class="grid__elem">
    TEST 1
  </div>
  <div class="grid__elem">
    TEST 2
  </div>
  <div class="grid__elem">
    TEST 3
  </div>
  <div class="grid__elem">
    TEST 4
  </div>
  <div class="grid__elem">
    TEST 5
  </div>
  <div class="grid__elem">
    TEST 6
  </div>
  <div class="grid__elem">
    TEST 7
  </div>
</div>

字符串
SCSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: -2%;
  &__elem {
    width: 18%;
    background: red;
    color: white;
    margin: 0 0 2% 2%;
  }
}

型
还有一个通过align-self定位特定元素的选项，但我发现这在工作示例中没有用。参见this link。

另一种方法是有一个flex父元素，它将所有查尔兹元素居中，然后使用margins将它们分开。
如果你想让每个元素都有独立的边距，只需为每个元素创建一个特定的类。

.box{
  display:flex;
  justify-content:center;
}
.box > div{
  margin: 5px 20px 5px 20px;
}

个字符

justifyContent: 'space-around'

字符串
资源：https://tproger.ru/translations/how-css-flexbox-works/

解决方案是在每个项目上设置相同的宽度，以便它们占据相同的空间，然后它们将按您的意愿居中。