How to make permanent 3 columns in flexbox, regardless of the width of the elements?

Question

css

Good afternoon, please tell me how to make always three columns in the parent having the property display: flex; regardless of the width of the elements.
Now like this:

<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

wrapper {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 500px;
}
.item {
width: 30%;
height: auto;
}

What I need is that regardless of the width of the item element, there will always be 3 columns in the center with equal indents.
And explain to the fool, I'm typing on bootstrap 3, why when adding class="img-responsive" image size 1000x1000 px, it does not shrink to the width and height of the container, but goes beyond the border, I broke my whole head!
Thank you!

Answer 1

.wrapper {
/* Добавьте строку ниже */
justify-content: space-between;
}

Here I myself studied about flexbox. Sufficiently detailed and clearly written