使用弹性盒模型虽然比浮动更加灵活方便,但一直遇到一个问题,当设置 justify-content: space-between时,当li个数随着屏幕大小变化之后最后一排出现缺个,会出现下图情况
解决方法是:给ul一个伪元素,并设置他的横向样式和每一个li一样
.comList {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.comList::after{
content: "";
width:230px;
}
.comList li {
position: relative;
/* margin-right: 20px; */
width: 230px;
height: 298px;
margin-bottom: 30px;
background-color: #fff;
transition: all .3s;
box-shadow: 0 0 8px 2px rgb(50 50 50 / 10%);
}
问题解决!