flex 分类模块布局（双排盒子布局等比例等间距）Vue绑定数据

效果如下：

样式

<style lang="scss">
body{background-color: #f4f7fb;}
#home{height: 100%;.main{padding: 20px;height:75%;.home_content{height: 100%;background-color: #fff;border-radius: 5px;padding:  0 50px;.backlog{height: 100px;line-height: 100px;.matter{margin-right: 60px;span{color: #ef8e8b;font-weight:700;}}}.home_nav{width: 100%;margin: 0 auto;.classify{display: flex;flex-direction:row;.nav_content{flex: 1;margin-right: 20px;height:140px;background:rgba(255,255,255,1);box-shadow:0px 2px 8px 0px rgba(222,222,222,0.5);margin-bottom: 20px;line-height: 140px;text-align: center;span{margin-left: 20px;}}.nav_content:nth-child(4){margin-right: 0;}.r_20{margin-right: 0px;}}}}}
}</style>

结构

<div class="main"><div class="home_content"><div class="backlog" ><strong>待办事项：</strong><span v-for="(item,i) in backlogList" :key="i" class="matter">{{item.name}} <span>{{item.number}}</span></span></div><div class="home_nav"><div class="classify" ><div class="nav_content" v-if="i<4" v-for="(item,i) in classifyList" :key="i"><img :src="item.classifyImg" alt=""><span>{{item.name}}</span></div></div><div class="classify"><div class="nav_content" v-if="i>=4" v-for="(item,i) in classifyList" :key="i"><img :src="item.classifyImg" alt=""><span>{{item.name}}</span></div></div></div>  </div></div>

vue数据

 data(){return {backlogList:[{name:'资源上报审核',number:'2'},{name:'新增角色权限',number:'13'},{name:'成员审核',number:'23'}],classifyList:[{name:'基本信息管理',classifyImg:require("../assets/images/home/baseMessage.png"),},{name:'展现管理',classifyImg:require("../assets/images/home/emerge.png"),},{name:'内容管理',classifyImg:require("../assets/images/home/content.png"),},{name:'用户管理',classifyImg:require("../assets/images/home/users.png"),},{name:'权限管理',classifyImg:require("../assets/images/home/jurisdiction.png"),},{name:'班级管理',classifyImg:require("../assets/images/home/class.png"),},{name:'校资管理',classifyImg:require("../assets/images/home/school.png"),},{name:'信息统计管理',classifyImg:require("../assets/images/home/statistics.png"),}],logo:require('../assets/images/home/logo.png'),circleUrl:require('../assets/images/home/user.jpg'),}},

总结：
这里用了两个盒子，每个4个，每个一等份，写了右边距和下边距同为20px，通过伪类控制每个盒子里最后一个元素的右边距为0；

数据我写了8个通过v-if条件判断来控制v-for循环输出的个数，保证每个盒子输出四个。。。

可能有更好的方法，此例子可当借鉴！

flex 分类模块布局（双排盒子布局等比例等间距）Vue绑定数据相关推荐

4.UI界面PyQt-三大布局（盒子布局、网格布局、表单布局）
1.1盒子布局-BoxLayout垂直代码如下(示例): import sysfrom PyQt5.QtWidgets import (QApplication, QWidget, QVBoxLay ...
CSS知识点——盒子布局及一些常用属性
CSS知识点--盒子布局及一些常用属性 - 盒子布局先上一张图,方便理解后面的布局内容盒子布局的主体通常为 div 标记(分区标签),这里不得不提一下 span 标签,它也是一个区域标签,但是区别 ...
CSS弹性盒子布局flex
flex布局: flex布局是继标准流布局.浮动布局.定位布局后的第四种布局方式.这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应.flex布局在浏览器中存在一定的兼容性( ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
简述弹性盒子flex布局及rem布局
简述弹性盒子flex布局及rem布局 flex布局方式采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴水平主轴主轴的开始位置(与边框的交叉点)叫做m ...
弹性盒子布局(Flex)，做项目必会技能
弹性盒子布局flex 开启flex属性布局display:flex flex-direction 主轴排列 justify-content 子项对齐方式 align-item属性:设置元素在交叉轴上的 ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
Vue.js-Day08【项目实战(附带完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
flex布局换行盒子上下有缝隙
flex布局换行盒子上下有缝隙可能是其他盒子有高度的原因撑开了 display: flex; flex-wrap: wrap; align-content: flex-start;//侧轴应该就好 ...

flex 分类模块布局（双排盒子布局等比例等间距）Vue绑定数据

样式

结构

vue数据

flex 分类模块布局（双排盒子布局等比例等间距）Vue绑定数据相关推荐

最新文章

热门文章

flex 分类模块布局 （双排盒子布局 等比例 等间距）Vue绑定数据

样式

结构

vue数据

flex 分类模块布局 （双排盒子布局 等比例 等间距）Vue绑定数据相关推荐

最新文章

热门文章

flex 分类模块布局（双排盒子布局等比例等间距）Vue绑定数据

flex 分类模块布局（双排盒子布局等比例等间距）Vue绑定数据相关推荐