Flexbox: right alignment of multiple items

Question

I have an HTML structure:

  <div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item item--right">4</div>
    <div class="item item--right">5</div>
  </div>

And styles:

.parent {
  display: flex;
  flex-wrap: no-wrap;
  align-content: flex-start;
}

.item {
  width: 50px;
}

I want items 1, 2, and 3 to be on the left, and items 4 and 5 on the right. I tried to solve this problem using align-self: right:

.item--right {
  align-self: right;
}

But it did not help.
Here is my violin. What am I doing wrong?

Answer 1

Find the first item you need to press right and apply margin-left:auto

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item {
  width: 50px;
}

div:nth-child(4) {
  margin-left: auto;
}

<div class="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item item--right">4</div>
  <div class="item item--right">5</div>
</div>

Run codeHide result