Как использовать CSS flex, чтобы два элемента плавали влево, а один — вправо?

Question

Мне нужно использовать CSS, чтобы два элемента выравнивались по левому краю, один за другим, а третий элемент — по правому краю.

Традиционно я бы использовалfloat: leftиfloat: rightдля этого, но это больше не рекомендуется.

Как мне это сделать с помощью flex или одного из современных свойств CSS?

Я пытался:

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

Это привело к тому, что все поплыло влево. Я хочу переместить один элемент вправо, но не все.

Я нашел ответ, который делает margin-left: auto;на третьем элементе, но это выглядит как уродливый хак, это лучший вариант?