废话不多说，间接上代码：
1、上中下布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0; margin: 0; display: flex; flex-direction: column; } .header, .footer { height: 50px; } .body { flex-grow: 1; background-color: #DDD; } </style> </head> <body> <div class="header">Header</div> <div class="body">Content</div> <div class="footer">Footer</div> </body> </html> 显示成果如下：
2、左右布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0; margin: 0; display: flex; } .left, .right { height: 100%; } .left { width: 250px; background-color: rgba(255,0,0,0.3); } .right { display: flex; flex-direction: column; } .header, .footer { height: 50px; } .right, .content { flex-grow: 1; } .content { background-color: #DDD; } </style> </head> <body> <div class="left">LeftNav</div> <div class="right"> <div class="header">Header</div> <div class="content">Content</div> <div class="footer">Footer</div> </div> </body> </html>页面的成果如下：
上面对几个要害的款式加以阐明，这样就能够设计出任何想要的布局了：
flex-grow: 1; // 示意容器在主轴的宽度有多余时该子项占据残余空间position：absolute; left: 0;right: 0; top: 0; bottom: 0; // 这一组款式让该元素占满定位的父级元素