<template>
<div class="group-main">
<div class="box-left">
<div class="box-left-top">
1
</el-card>
</div>
<div class="box-left-bottom">
2
</div>
</div>
<div class="box-right">
<div class="box-right-top">
3
</div>
<div class="box-right-center">
4
</div>
<div class="box-right-bottom">
5
</div>
</div>
</div>
</template>
</script>
<style lang="less" scoped>
.group-main{
display: flex;
height: 100%;
.box-left{
flex: 3;
display: flex;
flex-direction: column;
.box-left-top{
flex: 5;
}
.box-left-bottom{
flex: 1;
}
}
.box-right{
flex: 2;
display: flex;
flex-direction: column;
.box-right-top{
flex: 5;
}
.box-right-center{
flex: 5;
}
.box-right-bottom{
flex: 3;
}
}
}
</style>
代码如下图:
注意:如果发现哪里比例不对,说明flex里的内容超出了本身宽度,给当前元素增加overflow:hidden;即可看到正常的比例。