css 图片flex布局最后一行居中

.box-flex-warp {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
/* align-content: flex-start; 左对齐*/

}

.box-flex {
    box-sizing: border-box;
    flex: 0 0 33.33%;
}

.box-flex img {
    min-width: 100%;
    max-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

html

       <div class="box-flex-warp">
                    <div class="box-flex">
                        <img src="./assets/img/banner@2x.png" alt="">
                    </div>
                    <div class="box-flex">
                        <img src="./assets/img/baidu.png" alt="">
                    </div>
                    <div class="box-flex">
                        <img src="./assets/img/baidu.png" alt="">
                    </div>
                    <div class="box-flex">
                        <img src="./assets/img/baidu.png" alt="">
                    </div>
                    <div class="box-flex">
                        <img src="./assets/img/banner@2x.png" alt="">
                    </div>
                    <div class="box-flex">
                        <img src="./assets/img/baidu.png" alt="">
                    </div>
                    <div class="box-flex">
                        <img src="./assets/img/baidu.png" alt="">
                    </div>
                    <div class="box-flex">
                        <img src="./assets/img/baidu.png" alt="">
                    </div>
                </div>

align-content: flex-start; 左对齐
图片左对齐

转载于:https://www.cnblogs.com/silences/p/7009645.html