用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>最終效果如下:
