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

2022年6月18日09:16:54

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

二.效果
flex布局之5个div盒子一排，不同屏幕，盒子宽度自适应
三.代码和注释如下

<el-rowclass="indexListBoxRow"><el-colclass="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><divclass="description">{{item.value}}</div><iclass="el-icon-arrow-right" @click="detailClick(item.metricsId)"></i><divclass="date"><iclass="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>
  • 作者：鲸鱼前端大师
  • 原文链接：https://blog.csdn.net/weixin_54351962/article/details/124291852
    更新时间：2022年6月18日09:16:54 ，共 915 字。