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; 左对齐
图片左对齐