用flex加百分比实现左右布局，右边区域再上下等分为三份。
demo可以延伸：
1.右边区域等分为二分之一.container .rightWrapper > div的width设置为对应的百分比（50%），
四分之一（25%），以此类推。
2.左边区域上下或者左右布局（添加子元素，类似设置）。
3.加上浏览器前缀，处理flex布局的兼容性问题<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,*{
padding:0;
margin:0;
box-sizing: border-box;
}
.container{
display:flex;
}
.container .leftWrapper{
background: green;
height:400px;
width:25%;
}
.container .rightWrapper{
background: blue;
height:400px;
flex:1;
display:flex;
flex-wrap: wrap;
}
.container .rightWrapper > div{
background:red;
width:33.33%;
border:1px solid #ddd;
}
</style>
<title>111</title>
</head>
<body>
<div class="container">
<div class="leftWrapper"></div>
<div class="rightWrapper">
<div class="right1"></div>
<div class="right2"></div>
<div class="right3"></div>
<div class="right4"></div>
<div class="right5"></div>
<div class="right6"></div>
</div>
</div>
</body>
</html>最终效果如下:
