1.思路：就是对其中图案的分解与拼装。方案一：分解成8个小块实现

//index.wxmlviewclass="section"viewclass="section__title"flex-direction:row/viewviewclass="flex-wrp"style="flex-direction:row;"viewclass="flex-itembc_green1"1/viewviewclass="flex-itembc_red2"2/viewviewclass="flex-itembc_blue3"3/viewviewclass="flex-itembc_red"2/viewviewclass="flex-itembc_blue"3/view/viewviewclass="flex-wrp"style="flex-direction:row;"viewclass="flex-itembc_green"1/viewviewclass="flex-itembc_red3"/viewviewclass="flex-itembc_blue4"/view/view/view//index.wxss@import"../lib/weui.wxss";.page-section{margin-bottom:20rpx;}.flex-wrp{display:flex;}.bc_green1{background:green;width:50px;height:20px;}.bc_red2{background:red;width:25px;height:20px;}.bc_blue3{background:blue;width:25px;height:20px;}.bc_red{background:red;width:100px;height:20px;}.bc_blue{background:blue;width:100px;height:20px;}.bc_red3{background:red;width:100px;height:80px;}.bc_blue4{background:blue;width:100px;height:80px;}.bc_green{background:green;width:100px;height:80px;}

2.方案二：只用六个方块拼接实现

//index.wxmlviewclass="section"viewclass="section__title"flex-direction:row/viewviewclass="flex-wrp"style="flex-direction:row;"viewclass="flex-wrp"style="flex-direction:column;"viewclass="flex-wrp"style="flex-direction:row;"viewclass="flex-itembc_green"1/viewviewclass="flex-itembc_red"2/viewviewclass="flex-itembc_blue"3/view/viewviewclass="flex-itembc_green1"1/view/viewviewclass="flex-itembc_red1"2/viewviewclass="flex-itembc_blue1"3/view/view/view//index.wxss@import"../lib/weui.wxss";.page-section{margin-bottom:20rpx;}.flex-wrp{display:flex;}.bc_green{background:green;width:40px;height:30px;}.bc_red{background:red;width:30px;height:30px;}.bc_blue{background:blue;width:30px;height:30px;}.bc_green1{background:green;width:100px;height:70px;}.bc_red1{background:red;width:100px;height:100px;}.bc_blue1{background:blue;width:100px;height:100px;}

3.方案三利用浮动

//index.wxmlviewclass="section"viewclass="section__title"flex-direction:row/viewviewclass="flex-wrp"style="flex-direction:row;"viewclass="flex-itembc_green"1viewclass="flex-itembc_blue_float"3/viewviewclass="flex-itembc_red_float"2/view/viewviewclass="flex-itembc_red1"2/viewviewclass="flex-itembc_blue1"3/view/view/view//index.wxss@import"../lib/weui.wxss";.page-section{margin-bottom:20rpx;}.flex-wrp{display:flex;}.bc_green{background:green;width:100px;height:100px;}.bc_red_float{background:red;width:30px;height:30px;float:right;}.bc_blue_float{background:blue;width:30px;height:30px;float:right;}.bc_red1{background:red;width:100px;height:100px;}.bc_blue1{background:blue;width:100px;height:100px;}

4.最终效果