Flexbox: limit items per row

Is it somehow possible in blocs to set a maximum of items in a flexbox div? I would like to have 8 in one row and then to start a new row.

Thanks!

You can give the child items inside a flex container a width percentage. Make sure wrapping is enabled if you want them to start an additional “row”.

Eg. Add a class to child items. Set width to 12%.

@PeteSharp is it possible to control spacing between child elements? And have no space between parent and child?

Let’s say I want 30px spacing between child elements and 0px spacing between parent and child…

Many ways to do it.

You can reduce the width of the child elements, you can add padding and margins. There are ways to do that with CSS that automates it (But thats more advanced).

On the parent flex element, change the justify option. I did a video about using flex a while ago.

I watched your video before twice, but did not see a solution there.

Can I some how control the space in px between child elements? Coz I want 3 child in a row, so I use 33.333% child width and I want space between childs 30px. And have no space between parent border and child.

Thats because the video address flex in general. Once you figure out how to apply it, its rather straight forward to achieve what you are wanting. Make the width of the parent items smaller that 33.3%, I already mentioned that.

1 Like

I see. It could work for me.
But one thing in this way, feels a bit not comfortable… I don’t get exact 30 px spacing. I mean I can have it, but I need to count the percentage some how to get spacing between childs 30px. Is there a straight way, where I manage the spacing between?