flex布局之5个div盒子一排，不同屏幕，盒子宽度自适应

盒子一排，不同屏幕，盒子宽度自适应"/>

flex布局之5个div盒子一排，不同屏幕，盒子宽度自适应

一.需求
不同大小的屏幕进入页面，都是一排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盒子下边距为16pxmargin-right: 40px;//每个div盒子之间的右边距为40pxbackground-color: #fff;width: calc((100% - 160px)/5);//每个div盒子的宽度=（百分百的屏幕宽度-4个40px的右间距）/5个div盒子
}
.lastLine{margin-right: 0 !important;//每行第5个，即最后一列的div盒子的右边距设为0px
}
</style>