189 8069 5689

使用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种常用布局
    当前网址：http://www.cdxtjz.cn/article/djgjdss.html

    其他资讯