前端卡片列表布局 自适应铺满

项目中遇到卡片式列表，根据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 根据不同的屏 设置卡片的宽的百分比，这样能保证一行是铺满的 并达到自适应 上下行排列对齐