Flexbox:如何通过空间来证明内容的合理性并将所有内容都集中在一起？

Question

我遇到了flexbox的问题.

我有一个最大宽度为920px的div.我希望内容框从左到右填充div到最大可能宽度,所有内容都具有相同的边距.当屏幕尺寸下降到每行一个盒子时,我希望该盒子在屏幕上居中.

这是运行中的网站:http://javinladish.com/code/index.html

如果我使用:

justify-content: center;

然后框不会填满最大宽度.

如果我使用:

justify-content: space-between;

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

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

在此先感谢您的帮助.

Answer 1

最好的解决方案是margin: auto;在flex项垂直边距上使用如下:

    .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>

唯一的问题可能是如果最后一行有多个项目但不足以填满整行,那么最后一行之间会有很大的空间.