自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

使用Flex實(shí)現(xiàn)5種常用布局

作者：meikidd
開發(fā) 前端
本文分享使用Flex實(shí)現(xiàn)5種常用布局，包括Sticky Footer、Fixed-Width Sidebar、Sidebar、Sticky Header和Sticky Sidebar。

Sticky Footer

經(jīng)典的上-中-下布局。

當(dāng)頁面內(nèi)容高度小于可視區(qū)域高度時(shí)，footer 吸附在底部；當(dāng)頁面內(nèi)容高度大于可視區(qū)域高度時(shí)，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.  
  11. article { 
  12.  
  13.   flex: auto; 
  14.  
  15. } 

Fixed-Width Sidebar

在上-中-下布局的基礎(chǔ)上，加了左側(cè)定寬 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.  
  11. .content { 
  12.  
  13.   flex: auto; 
  14.  
  15.   display: flex; 
  16.  
  17. } 
  18.  
  19. .content article { 
  20.  
  21.   flex: auto; 
  22.  
  23. } 

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.  
  9. aside { 
  10.  
  11.   flex: none; 
  12.  
  13. } 
  14.  
  15. .content { 
  16.  
  17.   flex: auto; 
  18.  
  19.   display: flex; 
  20.  
  21.   flex-direction: column; 
  22.  
  23. } 
  24.  
  25. .content article { 
  26.  
  27.   flex: auto; 
  28.  
  29. } 

Sticky Header

還是上-中-下布局，區(qū)別是 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.  
  13. header { 
  14.  
  15.   height: 60px; 
  16.  
  17.   position: fixed; 
  18.  
  19.   top: 0; 
  20.  
  21.   left: 0; 
  22.  
  23.   right: 0; 
  24.  
  25.   padding: 0; 
  26.  
  27. } 
  28.  
  29. article { 
  30.  
  31.   flex: auto; 
  32.  
  33.   height: 1000px; 
  34.  
  35. } 

Sticky Sidebar

左側(cè) sidebar 固定在左側(cè)且與視窗同高，當(dāng)內(nèi)容超出視窗高度時(shí)，在 sidebar 內(nèi)部出現(xiàn)滾動條。左右兩側(cè)滾動條互相獨(dú)立。

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.  
  9. aside { 
  10.  
  11.   flex: none; 
  12.  
  13.   width: 200px; 
  14.  
  15.   overflow-y: auto; 
  16.  
  17.   display: block; 
  18.  
  19. } 
  20.  
  21. .content { 
  22.  
  23.   flex: auto; 
  24.  
  25.   display: flex; 
  26.  
  27.   flex-direction: column; 
  28.  
  29.   overflow-y: auto; 
  30.  
  31. } 
  32.  
  33. .content article { 
  34.  
  35.   flex: auto; 
  36.  
  37. }  

 

責(zé)任編輯：龐桂玉 來源： segmentfault
前端FlexCSS
相關(guān)推薦

2022-03-09 18:09:47

前端CSS代碼

2010-08-16 13:25:06

DIV

2010-08-05 13:44:12

Flex布局

2022-08-01 08:02:25

單元格可視化語法

2010-08-05 13:14:16

Flex布局

2010-08-05 13:27:06

Flex布局

2010-08-13 13:25:53

Flex頁面跳轉(zhuǎn)

2010-08-05 09:33:08

Flex頁面跳轉(zhuǎn)

2011-05-05 09:45:34

云計(jì)算試點(diǎn)城市

2022-04-15 14:57:57

Flex布局鴻蒙操作系統(tǒng)

2023-02-07 09:01:22

CSS

2016-10-08 22:33:54

相關(guān)分析數(shù)據(jù)

2010-08-12 15:59:23

Flex應(yīng)用程序

2010-08-13 14:39:57

Flex布局

2010-08-12 13:25:46

Flex驗(yàn)證方式

2010-08-13 13:14:09

Flex圖表

2023-10-30 09:18:28

CSSColumns布局

2010-09-10 08:54:52

DIV居中

2017-03-27 09:36:20

Flex布局計(jì)算

2016-11-04 10:49:48

微信小程序
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號