使用Flex实现5种常用布局

.content {

flex: auto;

display: flex;

}

.content article {

flex: auto;

}

Sidebar

左边是定宽 sidebar，右边是上-中-下构造。

demo link

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

Sticky Header

照样上-中-下构造，差别是 header 固定在顶部，不会跟着页面滚动。

demo link

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

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; 
 
}

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

demo link

2/3 首页上一页 1 2 3 下一页尾页

　　推荐阅读

　　全新AI人工智能操作系统崭露头角，将来Android或退出中国

开辟者大年夜赛路演 | 12月16日，技巧立异，北京不见不散当前，国浑家多的手机品牌都标榜着本身手机有本身的体系，如小米的MIUI，华为EMUI，魅族的Flyme OS等等，不过，这些所谓的“体系”只>>>详细阅读

本文标题：使用Flex实现5种常用布局

地址：http://www.17bianji.com/lsqh/39562.html

1/2 1