css3 实现两端对齐

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/83384765

HTML: 

 <ul class="person-info">
            <li>
                <div class="photo">
                    <img src="../../../assets/img/Path.png" alt="">
                    <span class="img-title">头像</span>
                </div>
            </li>
        </ul>

 CSS:

<style lang="less" scoped>
.photo{
    display: flex;
//两端对齐
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack:justify ;
    justify-content: space-between;
//文本上下对齐
    align-items: center;
    img{
        width: 1.333333rem;
        height: 1.333333rem;
    }
    .img-title{
        margin-right: .4rem;
        color: rgb(102, 102, 102);
        font-size: .426667rem;
    }
}
</style>

效果: