参考教程： 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>
上图：
