zoukankan      html  css  js  c++  java
  • flex布局——常用的几种布局

    第一种:上中下布局(Sticky Footer

    1当页面内容高度小于可视区域高度时,footer 吸附在底部;

    2当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下方

    <body>
      <header>HEADER</header>
      <article>CONTENT</article>
      <footer>FOOTER</footer>
    </body>
    

      

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    article {
      flex: auto;
    }
    

      

    第二种:Fixed-Width Sidebar——在上-中-下布局的基础上,加了左侧定宽 sidebar。

    <body>
      <header>HEADER</header>
      <div class="content">
        <aside>ASIDE</aside>
        <article>CONTENT</article>
      </div>
      <footer>FOOTER</footer>
    </body>
    

      

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .content {
      flex: auto;
      display: flex;
    }
    .content article {
      flex: auto;
    }
    

      第三种:Sidebar——左边是定宽 sidebar,右边是上-中-下布局。

    <body>
      <aside>ASIDE</aside>
      <div class="content">
        <header>HEADER</header>
        <article>CONTENT</article>
        <footer>FOOTER</footer>
      </div>
    </body>
    

      

    body {
      min-height: 100vh;
      display: flex;
    }
    aside {
      flex: none;
    }
    .content {
      flex: auto;
      display: flex;
      flex-direction: column;
    }
    .content article {
      flex: auto;
    }
    

      

    第四种:Sticky Header还是上-中-下布局,区别是 header 固定在顶部,不会随着页面滚动。

    <body>
      <header>HEADER</header>
      <article>CONTENT</article>
      <footer>FOOTER</footer>
    </body>
    

      

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-top: 60px;
    }
    header {
      height: 60px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 0;
    }
    article {
      flex: auto;
      height: 1000px;
    }
    

      

    第五种:Sticky Sidebar左侧 sidebar 固定在左侧且与视窗同高,当内容超出视窗高度时,在 sidebar 内部出现滚动条。左右两侧滚动条互相独立。

    <body>
      <aside>
        ASIDE
        <p>item</p>
        <p>item</p>
        <!-- many items -->
        <p>item</p>
      </aside>
      <div class="content">
        <header>HEADER</header>
        <article>CONTENT</article>
        <footer>FOOTER</footer>
      </div>
    </body>
    

      

    body {
      height: 100vh;
      display: flex;
    }
    aside {
      flex: none;
       200px;
      overflow-y: auto;
      display: block;
    }
    .content {
      flex: auto;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
    .content article {
      flex: auto;
    }
    

      

    DO What You Want !
  • 相关阅读:
    [BZOJ] 2276: [Poi2011]Temperature
    [Codevs] 5037 线段树练习4加强版
    [Codevs] 4919 线段树练习4
    [Codevs] 1082 线段树练习3
    [Codevs] 1080 线段树练习
    [Codevs] 1081 线段树练习 2 ----“分块!”
    1629: [Usaco2007 Demo]Cow Acrobats
    Kruskal || BZOJ 1601: [Usaco2008 Oct]灌水 || Luogu P1550 [USACO08OCT]打井Watering Hole
    SET || BZOJ 1588: [HNOI2002]营业额统计 || Luogu P2234 [HNOI2002]营业额统计
    线段树合并+并查集 || BZOJ 2733: [HNOI2012]永无乡 || Luogu P3224 [HNOI2012]永无乡
  • 原文地址:https://www.cnblogs.com/liumengdie/p/7920467.html
Copyright © 2011-2022 走看看