flex 实现圣杯布局

最新推荐文章于 2023-08-01 18:50:37 发布

初仔仔

最新推荐文章于 2023-08-01 18:50:37 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/luguiqing/p/7016864.html

版权

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

上图：

转载于:https://www.cnblogs.com/luguiqing/p/7016864.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

初仔仔

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex 实现圣杯布局

参考教程：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html<style type="text/css"> #container{ display: flex; flex-direction: column;/*纵向排序*/ } header, footer{...
复制链接

扫一扫