基本的样式和布局

<style>
  .box {
    display: flex;
  }

  .item {
    height: 100px;
    width: 100px;
    border: 1px solid green;
    color: green;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
  }
</style>


<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item item-right">3</div>
</div>

方案一

整个元素块靠右

.item-right {
    margin-left: auto;
  }

方案二

元素块撑满剩余空间，文字靠右

.item-right {
    flex: 1;
    text-align: right;
  }

可以看到，两种方案都可以实现最后一个子元素靠右

关于flex:1

flex-grow: 可拉伸
flex-shrink: 可压缩
flex-basis: 当前元素的宽度

flex默认值： flex-grow: 0, flex-shrink: 1, flex-basis: auto
flex: 1： flex-grow: 1, flex-shrink: 1, flex-basis: 0%
flex: auto： flex-grow: 1, flex-shrink: 1, flex-basis: auto
flex: 1 会导致父元素宽度自动为100%

参考
flex布局让某个子元素靠右显示