flex 靠左靠右如何布局？

<div class='footer'>
  <div>{{item.status}}</div>//靠左
  <i class='el-icon-delete'></i>//靠右
  <i class='el-icon-edit'></i>//靠右
</div>

<style>
.flooter{
    display:flex;
    .item{
        flex:1;
    }
}
.el-icon-delete{
    align-self:flex-end
}
</style>
 
<div class='footer'>
      <div class='item'>{{item.status}}</div>
      <div>
          <i class='el-icon-delete'></i>
          <i>|</i>
          <i class='el-icon-edit'>
          </i>
     </div>
</div>