flex 靠左靠右如何布局？

Question

期望的效果如图所示，如何灵活的方式布局

代码：

 <div class='footer'>
      <div>{{item.status}}</div>
      <div>
          <i class='el-icon-delete'></i>
          <i>|</i>
          <i class='el-icon-edit'>
          </i>
     </div>
</div>
<style>
 .footer {
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top-color: #0e0e0e;
        border-top-width: 1px;
        border-top-style: solid;
        i{
            margin:0 5px;
        }
        i:hover{
            cursor:pointer;
        }
    }
</style>

对于上面的代码我是使用 justify-content: space-between当方式将两个div分散两端，然后加入内容。但我并不希望用这种方式的期望的是这样：

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

我希望靠左或者靠右在元素上指定方位即可。不知这样的方式应该如何实现？

Answer 1

<style>
.flooter{
    display:flex;
    .item{
        flex:1;
    }
}
</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>

Answer 2

.el-icon-delete{
    align-self:flex-end
}