flex 实现圣杯布局

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

上图：

 

posted @ 2017-06-15 12:02  潮哥  阅读(1755)  评论(0)  编辑  收藏  举报