使用Flex实现5种常用布局

<body> 
 
  <aside> 
 
    ASIDE 
 
    <p>item</p> 
 
    <p>item</p> 
 
    <!-- many items --> 
 
    <p>item</p> 
 
  </aside> 
 
  <div class="content"> 
 
    <header>HEADER</header> 
 
    <article>CONTENT</article> 
 
    <footer>FOOTER</footer> 
 
  </div> 
 
</body>

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

【编辑推荐】

做前端好照样Java好？看这三方面
也许vue+css3做交互特效更简单
前端开辟者该若何设置数据库
15个有趣的JS和CSS库，快来看看吧
前端必备技巧之Web图像优化

【义务编辑：庞桂玉 TEL：（010）68476606】

3/3 首页上一页 1 2 3

　　推荐阅读

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

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

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

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

1/2 1