Justify flexbox components flex-start but centered inside container

Question

I've got this problem. I've a flexbox container that contain a certain number of div. It's wonderful that every div slide down when the space is terminated. And I want that every div start on the left and end on the right. I don't want center the rows when the divs are less than others. But, If I try to justify-content with "center" on the container css selector, the divs are aligned center in the rows with less div too. When I justify-content "flex-start" the divs are all on the left side of the content, but I want center verically those divs.

Thank you very much for any help!

This is what I got:

And this is what I want:

And this is the html and css:

.master-container {
    display: flex;
    padding-top: 50px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    background-color: red;
}

.course-container {
    margin: 10px;
    background-color: red;
    width: 280px;
    height: 240px;
    text-align: center;
    padding: 30px 10px;
    cursor: pointer;
}

.one-edge-shadow {
    box-shadow: 0 8px 6px -6px black;
}

<div class="master-container">
    <div class="course-container one-edge-shadow" style="background-color: rgb(141, 234, 21);">
    </div>

    <div class="course-container one-edge-shadow ng-star-inserted" style="background-color: rgb(199, 242, 143);">
    </div>

    <div class="course-container one-edge-shadow ng-star-inserted" style="background-color: rgb(72, 197, 52);">
    </div>

    <div class="course-container one-edge-shadow ng-star-inserted" style="background-color: rgb(22, 116, 16);">
    </div>

    <div class="course-container one-edge-shadow ng-star-inserted" style="background-color: rgb(231, 251, 20);">
    </div>
</div>