參考教程： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
<style type="text/css"> #container{ display: flex; flex-direction: column;/*縱向排序*/ } header, footer{ flex: 0 0 100px;/*因為為縱向的，所以100px類似於高度，0,0分別為不放大，不縮小*/ background-color: black; } .main{ display: flex; flex:1;/*簡寫，1,1，auto的意思*/ } .content{ flex:1; } .left, .right{ flex: 0 0 50px;/*默認為橫向的，所以這里的50px相當於寬度*/ background-color: red; } .left{ order:-1; } </style> <body> <div id="container"> <header>this is header</header> <div class="main"> <div class="content"> content <p>你的主體內容</p> </div> <div class="left"> left </div> <div class="right"> right </div> </div> <footer>this is the footer</footer> </div> </body>
上圖：
