How to place elements in different directions using flex?

Question

css

Greetings.
There is an HTML code:

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

I don’t understand yet how to make the first element be on the left side of the container, and the rest on the right, so that there is space between the first element and the second.

UP
By experimenting, I came up with two options:
1. Set the first element to flex-basis: 100%.
2. Set the first element to flex-grow: 1.
3. You can cram another empty box between the first and the others and give it flex-grow: 1.
4. Set the second element to margin-left: auto.
Is it true and what is the difference technically? And/or which would be correct?