How to line up three blocks in a row on flexes with indents between them?

Question

Flexbox

There is such a block design:

And I don’t fully understand how to implement them on flex. What interests me is the arrangement in a row of three blocks with the following conditions:
1. Pressed to the edges of the wrapper (left and right).
2. There are indents between the blocks.

So far I've thought of this:

.wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item{
    width: 33%;
    flex-grow: 1;
}

Is there any rule that would allow you to do as in the picture above?
I still don’t understand if there are rules that would allow indenting between blocks, for example, according to the following logic: we set min-width: 100px + max-width: 200px + three of them in a row for blocks, everything between them is empty space.

Answer 1

Everything is correct, only flex-grow is not needed, you already have the block width set.