css：flex布局最後一個子元素靠右擺放

基本的樣式和布局

<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布局讓某個子元素靠右顯示