How to create this alignment using CSS3 flexbox?

Question

I am trying to achieve a layout like this:

Those little squares are alltogether inside a container called #projects-container:

#projects-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 50px;
    flex-direction: row;
    justify-content: space-between;
}

And every square is inside a div using the .project class:

.project {
    width: 26%;
    margin-bottom: 20px;
}

The result looks like this:

What I would like to achieve is to always have 3 squares in a line and if there are less than 3 squares available for a line then they should just align to the left instead of leaving a huge gap in the middle.

How would I do that using Flexbox?