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循环输出的个数，保证每个盒子输出四个。。。

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