html - 如何用空格来证明内容的合理性并使一切居中？

Question

我遇到了 flexbox 的问题。

我有一个最大宽度为 920 像素的 div。我希望内容框从左到右填满 div 到最大可能宽度，所有内容都具有相等的边距。当屏幕尺寸缩小到每行一个框时，我希望该框在屏幕上居中。

这是正在运行的站点:http://javinladish.com/code/index.html

如果我使用:

justify-content: center;

那么盒子就不会填满最大宽度。

如果我使用:

justify-content: space-between;

当我下降到每行一个框时，框不会保持居中。

如何在两者之间取得平衡？即填满容器的最大宽度，并保持所有内容居中？

Answer 1

最好的解决方案是在 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;
    }

    <div class="flexbox">
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
    </div>

唯一的问题可能是如果最后一行有多个元素但不足以填满整行，则最后一行元素之间会有很多空间。