需求：比如我需要flex中前兩個元素是正常左對齊的，最后一個元素為按鈕，右對齊

<div class="item" v-for="(item, index) in bottomList" :key="index">
     <img class="item_img" :src="item.bannerImgUrl"/>
     <div class="name">{{item.adName}}</div>
     <button class="btn" @click="goTo(item.link)">打開</button>
</div>

解決方法

    .item{
        display flex
        align-items center
        justify-content flex-start
        width 100%
        background #f1f1f1
        margin-bottom 16px
        padding 24px
        border-radius 20px
        .item_img{
          width 120px
          height 120px
          border-radius 20px
        }
        .name{
          margin-left 30px
          font-size 24px
          color #7d7878
        }
        .btn{
          width 100px
          height 40px
          font-size 18px
          background linear-gradient(to right, #FF4B4C, #FF7D32)
          color #ffffff
          border-radius 20px
          margin-left auto
        }
      }

說明：父級設置 justify-content flex-start 然后需要單獨設置右對齊的元素設置margin-left auto,這是橫向單獨設置

需求：比如我需要flex中前兩個元素是正常居中對齊的，最后一個元素為底對齊

說明：父級設置align-item center然后需要單獨設置底部對齊的元素設置align-self：flex-end 這是縱向單獨設置