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; 左对齐
图片左对齐
posted @ 2017-06-14 16:36  sunniejs  阅读(2248)  评论(0编辑  收藏  举报