How to arrange elements evenly on the grid?

Question

css

I have a container which has the following properties

display: flex;
justify-content: space-between;

The element inside It turns out the following On large screens I want to show 3 in a row, but if I set the inner element To the second container, where only 2 elements due to the "space-between" property pushes the elements to the corners, and in the center there is an empty space (screen below ) Question How to make it so that if there are three or more elements in the container, they stand in turn with equal indents, and if there are two, they follow each other?
flex: 0 1 calc(50% - 6px)

flex: 0 1 calc(33.333% - 12px)

Answer 1

Use not space-between, but flex-start. It's just that the blocks will have to set some kind of margin so that they don't stick.

Answer 2

you can do this, I think you will figure it out
https://jsfiddle.net/konratnox/w0o4tc83/