横向布局
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>1</title> 6 <style type="text/css"> 7 *{margin:0;padding: 0;} 8 body{ 9 display: flex; 10 } 11 .box1,.box3{ 12 width: 200px; 13 height: 300px; 14 background: red; 15 } 16 .box2{ 17 height: 400px; 18 background: orange; 19 flex: 1; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box1">1</div> 25 <div class="box2">2</div> 26 <div class="box3">3</div> 27 </body> 28 </html>
垂直布局
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>2</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 html,body{ 9 height: 100%; 10 } 11 body{ 12 display: flex; 13 flex-direction: column; 14 justify-content: space-between; 15 } 16 .box1,.box3{ 17 height: 50px; 18 background: red; 19 } 20 .box2{ 21 background: orange; 22 flex: 1; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="box1">1</div> 28 <div class="box2">2</div> 29 <div class="box3">3</div> 30 </body> 31 </html>