需求：比如我需要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 这是纵向单独设置