博客

一.需求

不同大小的屏幕进入页面，都是一排5个div盒子，且div盒子宽度随屏幕自适应

二.效果



三.代码和注释如下

<el-row class="indexListBoxRow">
   <el-col class="indexList_box" 
       v-for="(item,index) in indexList" :key="item.id"
       //循环展示div盒子
       :class="{ lastLine: (index + 1) % 5 == 0 }"
       //若div盒子下标+1跟5取余为0，则代表这是最后一列，即第5列，则展示lastLine这个类名下的样式
        >
      <div>
          //每个div盒子里的内容，内容撑出div盒子高度
          <div :title="item.name">{{item.name}}</div>
          <div class="description">{{item.value}}</div>
          <i class="el-icon-arrow-right" @click="detailClick(item.metricsId)"></i>
          <div class="date"><i class="el-icon-refresh-right"></i>{{item.flushTime}}</div>
      </div>
   </el-col> 
</el-row>

<style lang="less" scoped>
 .indexListBoxRow{
    margin-top: 41px;
    display: flex;
    //flex布局
    flex-wrap: wrap;
    //可换行
 }
 .indexList_box{
    border-radius: 8px;
    margin-bottom: 16px;
    //每个div盒子下边距为16px
    margin-right: 40px;
    //每个div盒子之间的右边距为40px
    background-color: #fff;
    width: calc((100% - 160px)/5);
    //每个div盒子的宽度=（百分百的屏幕宽度-4个40px的右间距）/5个div盒子
}
.lastLine{
    margin-right: 0 !important;
    //每行第5个，即最后一列的div盒子的右边距设为0px
}
</style>