【发布时间】：2018-03-22 18:58:37
【问题描述】：
Codepen 示例：here
是否可以使用justify-content: space-between 将弹性容器中的项目均匀地重新排列在多行上？
正如您在 codepen (link) 中看到的，大多数项目都在顶行，只有那些不适合该行的项目才会显示在第二行（中间有空格）。
！！请注意，我只将包含所有过滤器的 div 设置为在 codepen 中显示的宽度。它将是引导 col-12 的 80% 宽度。因此，在大的情况下，它们适合一行，在 md 上，我想确保第二行不仅有 1 个项目，而且整个过滤器组居中并均匀分布在 2 行上（似乎包含图像）。
我希望它在顶行有 4 或 5 个项目，在底行有 4 或 5 个。
我希望图像能解释更多：
感谢您的帮助，对 flex 很陌生！
【问题讨论】：
-
只需在
.filters .filter中添加一些边距，使其变为margin: 5px 10px; -
我应该明确没有设置宽度（就像在我的 codepen 中一样，我将其设置在那里以复制显示在 2 行上的项目）。在宽桌面上，所有项目都排成一行，而不是当您缩小屏幕时。我将更新我的问题以使这一点更清楚。
-
@TemaniAfif 这样做以下行将不会在中心对齐。更改
.filters .filter并在左右两边留出一些边距，同时将justify-content 从.filters更改为居中。 -
@Cheshire 感谢您的建议，但对我来说似乎没有太大变化（在我的 chrome 中的 codepen 中）。
-
@nclsvh 很高兴听到你认为你已经解决了 =)