I created a gallery of images with some blocks using flex-box, however to be able to keep a default space between the items I am using margins and padding, I'd like to know if is there a way to space the items and keep a pattern in these spaces using just flex-box, without margins or paddings. I already spent a considerable time looking for an answer but I couldn't find it yet.
This is the gallery:
The purple part is the container.
I am applying flex-basis: 30% to each child element and distributing the ramaining 10% between the margins, right and left.
What I'd like to do is to keep the child elements with flex-basis: 30% (or something like that), so I would have the max of three items in each row, but separate them without margins.
I know I could use justify-content: space-between to do that, it would work fine if all the rows had three blocks, but that's not the case, it could have two or even one. In the example of the above image it would be like that:
As can be seen, since the second row has only two elements the layout would be broken.
Is there a way to do that?
P.S. I know I could use grid, but I'm still learning flex-box and I'd like to stick with it for now.
