如图：
代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <link href="flex.css" rel="stylesheet" type="text/css"> 6 </head> 7 <body> 8 9 <h1></h1> 10 <div class="container"> 11 <div class="row1"> 12 <div class="left" > 13 <div class="left-top"> <p>LEFT-TOP</p></div> 14 <div class="left-bottom"> <p>LEFT-BOTTOM</p></div> 15 </div> 16 <div class="right">RIGHT</div> 17 </div> 18 <div class="row2"> 19 <p>BOTTOM</p> 20 <p>BOTTOM</p> 21 <p>BOTTOM</p> 22 <p>BOTTOM</p> 23 <p>BOTTOM</p> 24 <p>BOTTOM</p> 25 <p>BOTTOM</p> 26 <p>BOTTOM</p> 27 </div> 28 </div> 29 30 31 </body> 32 </html>
CSS文件：
1 .container{ 2 display: flex; 3 display: -webkit-flex; 4 flex-direction: column; 5 overflow: hidden; 6 } 7 .row1{ 8 display: flex; 9 display: -webkit-flex; 10 flex-direction: row; 11 } 12 .left{ 13 display: flex; 14 display: -webkit-flex; 15 flex-direction: column; 16 flex: 1; 17 height: 655px; 18 } 19 .left-top{ 20 height: 295px; 21 flex: 1; 22 background:yellow; 23 } 24 .left-bottom{ 25 margin-top: 10px; 26 flex: 1; 27 background: rebeccapurple; 28 } 29 .right{ 30 flex: 3; 31 background:burlywood; 32 } 33 .row2{ 34 min-height: 300px; 35 overflow: auto; 36 height: 400px; 37 background: red; 38 } 39 body{ 40 overflow: hidden; 41 }
原文：http://www.cnblogs.com/dehuachenyunfei/p/6602592.html
