Flex布局解决最后一行左对齐
使用flex布局,将多个元素以三个为一行,往下排列。
.logo-field {
width: 650px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.__logo-item {
width: 200px;
height: 150px;
margin-top: 15px;
}
}
当列表元素数量不满足3n的时候,最后一行会根据justify-content:center
进行剩余空间分配,导致元素不会左对齐
.logo-field {
width: 650px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.__logo-item {
width: 200px;
height: 150px;
margin-top: 15px;
&:not(:nth-child(3n)) {
margin-right: calc(50px / 2);
}
}
}
通过:not(:nth-child(3n))
筛选出不是第3n的元素,然后用margin-right
模拟间隙
这里需要进行calc()
算出每个间隙大小,通过父盒子宽度减去每行子元素总宽度再除以两个间隙(因为这里是每行三个元素)得到每个间隙大小
:not()
用来筛选不符合括号内参数的元素