布局小技巧集合之——动态列表固定列数固定间距自适应布局

应用场景

在我们开发业务的过程中，经常遇到列表显示，并且ui设计是每行固定几个元素跟固定间距，但是因为我们需要根据不同大小的屏幕进行自适应，在不用rem等单位进行自适应的时候，我们在pc端布局，可以使用以下2种方法进行，固定动态列表的固定列数固定间距

效果图下：数据个数不固定，每行固定4个，元素之间间距为24

 

 

 

 实现方法一

使用flex布局结合我们的calc动态计算每个元素宽度，以达不同屏幕自适应宽度！！！！

html

<div class="list">
   <div class="item" :key="index" v-for="(item, index) in list">
        列表元素
   </div>
</div>

css

.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc((100% - 24px * 3) / 4); // 一个间距24，总的4个
    height: 28px;
    line-height: 28px;
    margin: 0 24px 24px 0;
    border: 1px solid #ccc;
    text-align: center;
  }
  .item:nth-of-type(4n) {
    margin-right: 0;
  }
}

实现方法二

可以利用padding属性结合element-ui栅格栏布局进行

html

<div class="list">
   <div class="item" :key="index" v-for="(item, index) in list">
       <div>列表元素</div>
    </div>
 </div>

css

.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 25%;
    height: 28px;
    line-height: 28px;
    padding-right: 24px;
    margin-bottom: 24px;
    & > div {
      border: 1px solid #ccc;
      text-align: center;
    }
  }
  .item:nth-of-type(4n) {
    padding-right: 0;
  }
}