使用Flex实现5种常用布局

开辟者大年夜赛路演 | 12月16日，技巧立异，北京不见不散

Sticky Footer

经典的上-中-下构造。

Sticky Sidebar

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

demo link

<body>  
  
  <header>HEADER</header>  
  
  <article>CONTENT</article>  
  
  <footer>FOOTER</footer>  
  
</body>

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

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

Fixed-Width Sidebar

在上-中-下构造的基本上，加了左侧定宽 sidebar。

demo link

<body> 
 
  <header>HEADER</header> 
 
  <div class="content"> 
 
    <aside>ASIDE</aside> 
 
    <article>CONTENT</article> 
 
  </div> 
 
  <footer>FOOTER</footer> 
 
</body>

body { 
 
  min-height: 100vh; 
 
  display: flex; 
 
  flex-direction: column; 
 
} 
 
	
			 1/3    1 2 3 下一页 尾页	
			

　　推荐阅读
　　全新AI人工智能操作系统崭露头角，将来Android或退出中国
            开辟者大年夜赛路演 | 12月16日，技巧立异，北京不见不散当前，国浑家多的手机品牌都标榜着本身手机有本身的体系，如小米的MIUI，华为EMUI，魅族的Flyme OS等等，不过，这些所谓的“体系”只>>>详细阅读


本文标题：使用Flex实现5种常用布局
地址：http://www.17bianji.com/lsqh/39562.html
 1/2    1