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