Html Flexbox：如何在内容之间留出空间并使所有内容都居中？

我遇到了flexbox的问题

我有一个最大宽度为920px的div。我想让内容框从左到右填满div，直到最大可能的宽度，所有内容都有相等的边距。当屏幕大小下降到每行一个框时，我希望该框在屏幕上居中

以下是正在运行的站点：

如果我使用：

justify-content: center;

justify-content: space-between;

那么这些盒子就不能填满最大宽度

如果我使用：

justify-content: center;

justify-content: space-between;

然后，当我下降到每行一个盒子时，盒子不会保持居中

我怎样才能在两者之间达到一个愉快的平衡？即填充容器的最大宽度，并保持所有内容居中

---

提前感谢您的帮助。

最好的解决方案是使用

margin:auto如下所示：


.flexbox{
背景颜色：粉红色；
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.弹性项目{
宽度：175px；
高度：175px；
背景颜色：灰色；
利润率：10px自动；
}
调整内容：之间的空格将始终将每行的项目推到容器的最边缘。另一行上的任何元素都不会居中

我在负利润方面取得了成功，但这意味着您需要明确设置这些利润：


HTML

还有一个选项可以通过
align self
定位特定元素，但我发现这在工作示例中没有用处。看。
你似乎同时在追求两种行为。我成功地在容器上设置了
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;
}


解决方案是在每个项目上设置相同的宽度，以便它们占据相同的空间，然后它们将按照您的意愿居中。
您是否尝试过
调整内容：周围空间
？@漂浮，其效果将与
调整内容：周围空间
相同，但它不会产生OP想要的效果（请参阅下面的评论）。您可以使用媒体查询@媒体屏幕和（最大宽度580px）查看相关页面时，您将很难使用Flexbox来适应移动浏览器，因为大多数浏览器不支持包装。您必须选择一种不同的方法来解决此问题。请尝试以下操作：结果与
调整内容：周围的空格
相同，物品没有到达两边。通常在搜索4个小时后凌晨2点左右，一条非常小的SO评论会提到当你用方形钉住一个圆孔时所需的确切方法-谢谢这对最后一行中的多个物品不起作用