解析博客前端的flex布局

作者: 起这么长的名字根本没有用 | 来源:发表于2017-03-08 00:58 被阅读251次

    需求:
    纵向三栏布局:头部、主体、尾部
    1.当不出现滚动条的时候头部和尾部固定在头和底侧,主体撑开剩余高度
    2.当出现滚动条的时候尾部跟在主体后面被撑下去

    本博客项目地址

    实现目标:
    实现代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>三栏纵向布局</title>
      <style>
          html{
            background: silver;
            height: 100%;
          }
          body{
            margin:0;
            height: 100%;
          }
          #wrap{
            display: flex;
            flex-direction: column;
            height: 100%;
          }
          header,footer{
              flex:0 0 100px;
          }
          header{
              background: red;
          }
          footer{
            background: blue;
          }
          .main{
            flex:1 0 auto;
            background: orange;
          }
      </style>
    </head>
    <body>
       <div id="wrap">
         <header>
             我是头部啊
         </header>
         <div class="main">
           我是主体,我最牛逼,我高度能自适应,我能把footer带跑偏
            改变我的内容,我高度就自适应了
         </div>
         <footer>我是尾部</footer>
       </div>
    </body>
    </html>
    
    程序说明:
    1. 现将htmlbody以及主体div元素的高度设置成100%;让高度撑满真个屏幕;
    2. 主体div元素的display设置成flex,然后flex-direction属性设置成column
    3. footerheaderflex属性设置成0 0 100px,表明不管是否有剩余空间,还是剩余空间不足,我的高度都固定在100px;
    4. 主体divflex属性设置成1 0 auto,当最后一个属性值是auto的时候表明他的主轴宽度取决于第一个属性flex-grow,也就是有剩余空间的时候,占满剩余空间;中间设置成0表明,剩余空间不够的时候主轴宽度也不压缩。
    5. 大功告成,改变主体div的高度吧!
    注意:

    这是一个flex布局的实战;如果不懂flex布局,请看
    一个完整的Flexbox指南
    理解Flexbox:你需要知道的一切

    相关文章

      网友评论

        本文标题:解析博客前端的flex布局

        本文链接:https://www.haomeiwen.com/subject/zrwvgttx.html