中国领先的IT技术网站
|
|

使用Flex实现5种常用布局

本文分享使用Flex实现5种常用布局,包括Sticky Footer、Fixed-Width Sidebar、Sidebar、Sticky Header和Sticky Sidebar。

作者:meikidd来源:segmentfault|2017-12-07 14:40

开发者大赛路演 | 12月16日,技术创新,北京不见不散


Sticky Footer

经典的上-中-下布局。

当页面内容高度小于可视区域高度时,footer 吸附在底部;当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下方

demo link

  1. <body>  
  2.   
  3.   <header>HEADER</header>  
  4.   
  5.   <article>CONTENT</article>  
  6.   
  7.   <footer>FOOTER</footer>  
  8.   
  9. </body> 
  1. body { 
  2.  
  3.   min-height: 100vh; 
  4.  
  5.   display: flex; 
  6.  
  7.   flex-direction: column
  8.  
  9.  
  10. article { 
  11.  
  12.   flex: auto; 
  13.  

Fixed-Width Sidebar

在上-中-下布局的基础上,加了左侧定宽 sidebar。

demo link

  1. <body> 
  2.  
  3.   <header>HEADER</header> 
  4.  
  5.   <div class="content"
  6.  
  7.     <aside>ASIDE</aside> 
  8.  
  9.     <article>CONTENT</article> 
  10.  
  11.   </div> 
  12.  
  13.   <footer>FOOTER</footer> 
  14.  
  15. </body> 
  1. body { 
  2.  
  3.   min-height: 100vh; 
  4.  
  5.   display: flex; 
  6.  
  7.   flex-direction: column
  8.  
  9.  
  10. .content { 
  11.  
  12.   flex: auto; 
  13.  
  14.   display: flex; 
  15.  
  16.  
  17. .content article { 
  18.  
  19.   flex: auto; 
  20.  

Sidebar

左边是定宽 sidebar,右边是上-中-下布局。

demo link

  1. <body> 
  2.  
  3.   <aside>ASIDE</aside> 
  4.  
  5.   <div class="content"
  6.  
  7.     <header>HEADER</header> 
  8.  
  9.     <article>CONTENT</article> 
  10.  
  11.     <footer>FOOTER</footer> 
  12.  
  13.   </div> 
  14.  
  15. </body> 
  1. body { 
  2.  
  3.   min-height: 100vh; 
  4.  
  5.   display: flex; 
  6.  
  7.  
  8. aside { 
  9.  
  10.   flex: none; 
  11.  
  12.  
  13. .content { 
  14.  
  15.   flex: auto; 
  16.  
  17.   display: flex; 
  18.  
  19.   flex-direction: column
  20.  
  21.  
  22. .content article { 
  23.  
  24.   flex: auto; 
  25.  

Sticky Header

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

demo link

  1. <body> 
  2.  
  3.   <header>HEADER</header> 
  4.  
  5.   <article>CONTENT</article> 
  6.  
  7.   <footer>FOOTER</footer> 
  8.  
  9. </body>
  1. body { 
  2.  
  3.   min-height: 100vh; 
  4.  
  5.   display: flex; 
  6.  
  7.   flex-direction: column
  8.  
  9.   padding-top: 60px; 
  10.  
  11.  
  12. header { 
  13.  
  14.   height: 60px; 
  15.  
  16.   position: fixed; 
  17.  
  18.   top: 0; 
  19.  
  20.   left: 0; 
  21.  
  22.   right: 0; 
  23.  
  24.   padding: 0; 
  25.  
  26.  
  27. article { 
  28.  
  29.   flex: auto; 
  30.  
  31.   height: 1000px; 
  32.  

Sticky Sidebar

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

demo link

  1. <body> 
  2.  
  3.   <aside> 
  4.  
  5.     ASIDE 
  6.  
  7.     <p>item</p> 
  8.  
  9.     <p>item</p> 
  10.  
  11.     <!-- many items --> 
  12.  
  13.     <p>item</p> 
  14.  
  15.   </aside> 
  16.  
  17.   <div class="content"
  18.  
  19.     <header>HEADER</header> 
  20.  
  21.     <article>CONTENT</article> 
  22.  
  23.     <footer>FOOTER</footer> 
  24.  
  25.   </div> 
  26.  
  27. </body> 
  1. body { 
  2.  
  3.   height: 100vh; 
  4.  
  5.   display: flex; 
  6.  
  7.  
  8. aside { 
  9.  
  10.   flex: none; 
  11.  
  12.   width: 200px; 
  13.  
  14.   overflow-y: auto; 
  15.  
  16.   display: block; 
  17.  
  18.  
  19. .content { 
  20.  
  21.   flex: auto; 
  22.  
  23.   display: flex; 
  24.  
  25.   flex-direction: column
  26.  
  27.   overflow-y: auto; 
  28.  
  29.  
  30. .content article { 
  31.  
  32.   flex: auto; 
  33.  
  34. }  

【编辑推荐】

  1. 做前端好还是Java好?看这三方面
  2. 也许vue+css3做交互特效更简单
  3. 前端开发者该如何设置数据库
  4. 15个有趣的JS和CSS库,快来看看吧
  5. 前端必备技术之Web图像优化
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

XML基础教程

本书分为8章。第1章主要对XML做了简单的介绍。第2章详细讲解规范的XML文件。第3章主要讲解有效的XML文件,特别重点讲解DTD文件。第4章讲解C...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊