<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <style> .container { display: flex; margin-top: 60px;/*以下是默认属性，不写也行 flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; */ } .main { background-color: #ffffa9; height: 500px; width: 100%; order: 2; flex: 3; display: flex; } .left { background-color: #ffd0d0; width: 160px; height: 400px; order: 1 } .right { background-color: #a9ffa9; width: 160px; height: 400px; order: 3 } .bootom { background-color: blue; padding: 20px; left: 0; bottom: 0; right: 0; position: fixed; } nav { background-color: red; left: 0; top: 0; right: 0; position: fixed; height: 60px; } h1 { font-size: 1rem; padding: 1rem; border: 1px dashed #FFF; } </style> </head> <body> <nav></nav> <div class="container"> <div class="left">Left</div> <div class="main"> <div style="150px; height:150px; border:1px solid #99BB11;">left</div> <div style=" border:1px solid #99BB11;justify-content:center; align-items:center;" > <h1>center</h1> </div> <div style="150px; height:150px; border:1px solid #99BB11;">right</div> </div> <div class="right">Right <br> <br> rrr </div> </div> <div class="bootom">bootom</div> </body> </html>