How do I use CSS flex to make two items float left and one float right?

Question

I need to use CSS to make two items align left, one after the other, and the third item align to the right.

Traditionally I would have used float: left and float: right for this but it's no longer recommended.

How do I do it with flex or one of the modern CSS properties please?

I tried:

.flex-container {
display: flex;
justify-content: flex-start;
}

This had the effect of everything floating left. I want to float one item to the right, but not all of them.

I've found an answer that does margin-left: auto; on the third element but that looks like an ugly hack, is it the best option?