CSS3实现“圣杯布局”--（固比固布局）

最新推荐文章于 2025-10-24 21:15:13 发布

原创最新推荐文章于 2025-10-24 21:15:13 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #布局 #flex #html

CSS3 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用CSS3中的order属性实现圣杯布局，并利用flex属性达到中间列等高及页脚黏附效果。通过具体示例代码展示了HTML结构与CSS样式设置。

使用CSS3中的属性order可以轻易实现“圣杯布局”，实现伸缩项目的顺序重组，还有！！！使用flex属性实现了中间列的等高效果，以及页脚的黏附效果。

HTML:

  <header>header</header>
  <section>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
  </section>
  <footer>footer</footer>

CSS

*{margin:0;padding:0;box-sizing:border-box;}
    html,
    body{
      height:100%;color:#fff;
    }
    body{
      min-width:100%;
      display:-webkit-flex;
      display:flex;
      -webkit-flex-flow:column wrap;
      flex-flow:column wrap;
      -webkit-justify-content:start;
      justify-content:start;
    }
    header,
    section,
    nav,
    aside,
    footer{
      display:block;
    }
    header{
      background-color: red;
      min-height:100px;
      padding:10px 20px;
      widht:100%;
      -webkit-order:1;
    }
    section{
      min-width:100%;
      margin:20px 0;
      display:-webkit-flex;
      -webkit-order:2;
      -webkit-flex:1;
    }
    nav{
      background-color: #ccc;
      padding:1%;
      width:220px;
      -webkit-order:1;
    }
    article{
      background-color:blue;
      padding:1%;
      margin-left:2%;
      margin-right:2%;
      -webkit-flex:1;
      -webkit-order:2;
    }
    aside{
      background-color: green;
      padding:1%;
      width:220px;
      -webkit-order:3;
    }
    footer{
      background-color: #e5e5e5;
      min-height: 60px;
      min-width:100%;
      -webkit-order:3;
    }