美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

使用Flex实现5种常用布局

Sticky Footer

成都创新互联公司长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为雁峰企业提供专业的做网站、成都网站设计，雁峰网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

经典的上-中-下布局。

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

demo link

 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    HEADER
      
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.   
    CONTENT
      
    6. 
  
  
  
  
  6.   
    7. 
  
  
  
  
  7.   
    FOOTER
      
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.  
    10.

 

 
 
 
 
    
  
  
  
  
  1. body { 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   min-height: 100vh; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.   display: flex; 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   flex-direction: column; 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. article { 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.   flex: auto; 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. } 
    16.

Fixed-Width Sidebar

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

demo link

 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   
    HEADER
     
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.     
    CONTENT
     
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.   
 
  •  
  •   
    FOOTER
     
  •  
  •  
    •  
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   min-height: 100vh; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   display: flex; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.   flex-direction: column; 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. .content { 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   flex: auto; 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   display: flex; 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. .content article { 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.   flex: auto; 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23. } 
      24.

    Sidebar

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

    demo link

     

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.    
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.    
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     
      HEADER
       
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.     
      CONTENT
       
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.     
      FOOTER
       
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   
     
  •  
  •  

    •  

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   min-height: 100vh; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   display: flex; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. aside { 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.   flex: none; 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15. .content { 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.   flex: auto; 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.   display: flex; 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.   flex-direction: column; 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23. } 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25. .content article { 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27.   flex: auto; 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29. } 
      30.

    Sticky Header

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

    demo link

     

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
      HEADER
       
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   
      CONTENT
       
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.   
      FOOTER
       
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.

     

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

    Sticky Sidebar

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

    demo link

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.     ASIDE 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     
      item
       
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.     
      item
       
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.      
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.     
      item
       
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.    
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.    
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.     
      HEADER
       
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.     
      CONTENT
       
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.     
      FOOTER
       
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.   
     
  •  
  •  

    •  

     
 
 
 
      
  
  
  
  
    1. body { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   height: 100vh; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.   display: flex; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. aside { 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.   flex: none; 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   width: 200px; 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   overflow-y: auto; 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.   display: block; 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21. .content { 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.   flex: auto; 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.   display: flex; 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27.   flex-direction: column; 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29.   overflow-y: auto; 
      30. 
  
  
  
  
    30.  
      31. 
  
  
  
  
    31. } 
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33. .content article { 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35.   flex: auto; 
      36. 
  
  
  
  
    36.  
      37. 
  
  
  
  
    37. }  
      38.

    网站栏目：使用Flex实现5种常用布局
    网站URL：http://www.zsjierui.cn/article/djgjdss.html

    其他资讯