项目中遇到卡片式列表,根据UI图的宽高实现 在不同屏宽的电脑上 就会出现右边有很多空白的现象,感觉不是很好。
试过很多种方法,有一种是 外层用flex布局,然后justant-items:space-bettwen ,list 元素多加几个空的占位使其 2端对其时不会间隔很大 保持不同行之前的对齐,虽然可以,但是不同屏大小元素之间的间隔是不固定的 有时会很大 并不是很理想。
参考了抖音电脑版的类似布局,发现另一种方法很好,并记录下来。代码如下:
<div class="list_box">
<div class="list_item"></div>
<div class="list_item"></div>
<div class="list_item"></div>
<div class="list_item"></div>
<div class="list_item"></div>
<div class="list_item"></div>
</div>
<style lang="scss">
.list_box {
display: flex;
flex-wrap: wrap;
place-content: flex-start;
flex: 1;
.list_item {
width: 33.33%;
padding: 0 10px 20px 10px;
box-sizing: border-box;
}
}
@media screen and (min-width:1140px) {
.list_box .list_item {
width: 33.33%;
}
}
@media screen and (min-width:1596px) {
.list_box .list_item {
width: 25%;
}
}
@media screen and (min-width:2220px) {
.list_box .list_item {
width: 20%;
}
}
</style>
方法就是用百分比来控制宽度,用@media 根据不同的屏 设置卡片的宽的百分比,这样能保证一行是铺满的 并达到自适应 上下行排列对齐