How to arrange boxes with flexbox at the same distance from each other?

Question

css

Greetings
, I can’t figure out how to use the flexbox properties to place nested blocks in such a way that they do not recede from the boundaries of the parent block, and when the size of the parent block is reduced, they would be placed in two lines and, as in the first case, they would have the same indents from each other and would not recede from the borders of the parent block.

How?

Answer 1

justify-content: space-between;
align-content: space-between;

Answer 2

Maybe something like this:
https://jsfiddle.net/jLvegoku/
Or add more MQ