效果如上图
实现方式(纯css实现)
1..媒体查询实现
@media screen and (min-width: 1621px) {
.source-item-wrapper {
max-width: 25%;
flex-basis: 25%;
}
}
@media screen and (max-width: 1620px) and (min-width: 1024px) {
.source-item-wrapper {
max-width: 33.3333%;
flex-basis: 33.3333%;
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.source-item-wrapper {
max-width: 50%;
flex-basis: 50%;
}
}
根据不同屏幕设置 flex-basis和max-width的属性。