css_flex:最后一行分散问题。解决方案
解决最后一排分开排列
看你一行有几个,给最后一个的margin-right设为0就可以了
4n:是几个就设置xn
<div class="box" style="display: block;">
<div class="title">图片:</div>
<div class="imgBox">
<img class="baseImg" src="loginLogo.png" alt="">
<img class="baseImg" src="loginLogo.png" alt="">
<img class="baseImg" src="loginLogo.png" alt="">
<img class="baseImg" src="loginLogo.png" alt="">
<img class="baseImg" src="loginLogo.png" alt="">
<img class="baseImg" src="loginLogo.png" alt="">
</div>
</div>
.imgBox {
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 10px 0;
/* justify-content: space-between; */
}
.baseImg {
width: 22%;
height: 80px;
opacity: 1;
border-radius: 0px;
margin-bottom: 12px;
margin-right: 12px;
}
/* 解决最后一排分开排列 */
.baseImg:nth-child(4n) {
margin-right: 0;
}