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; 左對齊
圖片左對齊


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM