灵活的间距-均匀分布在多条生产线上 [英] Flex space-between - evenly distributed over multiple line

问题描述

Codepen示例:此处

Codepen example: here

是否可以在justify-content: space-between的弹性容器中重新排列多行内容?

Is it possible to rearange items in a flex-container with justify-content: space-between evenly over multiple lines?

您可以在Codepen中看到(链接)，大多数项目位于第一行，并且只有那些不适合该行的内容才会显示在第二行(中间有空格).

As you can see in the codepen (link) most items are on the top row, and only those that don't fit that row are displayed on the second line (with space-between).

！请注意，我仅将包含所有过滤器的div设置为设置宽度，以显示在代码笔中.这将是bootstrap col-12的80％宽度.因此，大体上它们适合放在一行上，而在md上，我想确保第二行上不仅有1个项目，而且整个过滤器组居中并均匀地分布在2行上(似乎包含图像).

!! Note that I only made the div containing all filters a set width to show in the codepen. It will be a 80% width of a bootstrap col-12. So on large they fit on one row, on md I want to make sure there is not just 1 item on the second line, but that the whole group of filters centers and evenly distributes over 2 rows (seem included image).

我想拥有它，以便在第一行中有4或5个项目，在底部行中有4或5个项目.
我希望该图像能说明更多信息:

I would like to have it so that there are 4 or 5 items on the top row, and 4 or 5 on the bottom row.
I hope the image explains more:

感谢您的帮助，Flex刚起步！

Thanks for the help, pretty new to flex!

推荐答案

感谢@Cheshire在评论中的建议，我发现了一种使它或多或少起作用的方法.

Thanks to @Cheshire's suggestions in the comments, I found a way to make it work, more or less.

如果在项目中添加margin-right和margin-left并设置justify-content: center，则可以实现我想要的.
唯一的缺点是您必须为项目设置固定的边距(左右)，因此您不能再使用space-between了.但就我而言，它仍然看起来更好.

If you add margin-right and margin-left to the items and set justify-content: center you can achieve what I was looking for.
The only drawback is that you have to set a fixed margin (left and right) to the items, so you can't use space-between anymore. But in my case it still looks better though.

这篇关于灵活的间距-均匀分布在多条生产线上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！