CODEWITHSUNDEEP
cssflexbox
nclsvh
nclsvh

Reputation: 2868

Flex space-between - evenly distributed over multiple line

Codepen example: here

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

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

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

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: enter image description here

Thanks for the help, pretty new to flex!

Upvotes: 4

Views: 2972

Answers (1)

nclsvh
nclsvh

Reputation: 2868

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

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.

Upvotes: 3

Related Questions