小说阅读网,小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

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

Sticky Footer

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為雁峰企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)，雁峰網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

當(dāng)頁(yè)面內(nèi)容高度小于可視區(qū)域高度時(shí)，footer 吸附在底部；當(dāng)頁(yè)面內(nèi)容高度大于可視區(qū)域高度時(shí)，footer 被撐開(kāi)排在 content 下方

demo link

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

Fixed-Width Sidebar

在上-中-下布局的基礎(chǔ)上，加了左側(cè)定寬 sidebar。

demo link

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

Sidebar

左邊是定寬 sidebar，右邊是上-中-下布局。

demo link

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

Sticky Header

還是上-中-下布局，區(qū)別是 header 固定在頂部，不會(huì)隨著頁(yè)面滾動(dòng)。

demo link

 
 
 
 
  
  
  
  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

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

demo link

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

網(wǎng)站標(biāo)題：使用Flex實(shí)現(xiàn)5種常用布局
鏈接分享：http://m.fisionsoft.com.cn/article/djgjdss.html

新聞中心

其他資訊