Flexbox:对齐几个元素

我有一个HTML结构:

  

    
1
    
2
    
3
    
4
    
5
  

和风格:

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

.item {
  width: 50px;
}

我希望项目1,2和3位于左侧,项目4和5位于右侧.我试图用以下方法解决这个问题align-self: right:

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

但它没有帮助.
这是我的小提琴.我究竟做错了什么？

找到需要正确推送并应用的第一个元素 margin-left:auto

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

.item {
  width: 50px;
}

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

  
1
  
2
  
3
  
4
  
5