Flex的空間之間 - 均勻地分佈在多個線路分佈

是否有可能與rearange均勻justify-content: space-between在多線柔性容器項目？

正如您在codepen（link）中看到的那樣，大多數項目位於最上面一行，只有那些不符合該行的行顯示在第二行（空格之間）。

!!請注意，我只將包含所有濾鏡的div設置爲寬度以顯示在codepen中。這將是自舉col-12的80％寬度。所以大的他們適合一行，在MD我想確保在第二行不只有一個項目，但整個過濾器組中心和均勻分佈超過2行（似乎包括圖像）。

我想擁有它，以便頂部有4或5個項目，底部有4或5個項目。
希望圖像詳細解釋：

感謝您的幫助，相當新的彎曲！

2017-10-11 nclsvh

只需爲'.filters .filter'添加一些邊距使其爲'margin：5px 10px;' –

我應該明確指出沒有設置寬度（如在我的codepen中，我將其設置爲複製顯示的項目在2行）。在寬廣的桌面上，所有項目都適合一條線，而不是在縮小屏幕時。我會更新我的問題，使其更清楚。 – nclsvh

@TemaniAfif這樣做，以下行不會在中心對齊。改變'.filters .filter'，並給它一些左右的餘量，同樣，將justify-content從'.filters'改爲中心。 – Cheshire

感謝@ Cheshire在評論中提出的建議，我找到了一種讓它工作的方法，或多或少。

如果您將margin-right和margin-left添加到項目並設置justify-content: center您可以實現我正在尋找的內容。
唯一的缺點是您必須爲物品設置固定的邊距（左側和右側），因此您無法再使用space-between。但就我而言，它仍然看起來更好。

2017-10-11 08:16:11 nclsvh

回答