Flexbox 圣杯布局

2018-01-02 13:56:00
admin
原创
473
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flexbox 圣杯布局</title>
	
	<style>
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}
		
@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}
	</style>
</head>

<body class="HolyGrail">
  <header>Header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">Main</main>
    <nav class="HolyGrail-nav">Left</nav>
    <aside class="HolyGrail-ads">Ads</aside>
  </div>
  <footer>Footer</footer>
</body>

</html>
  • QQ讨论群
  • 关注微信
    • 欢迎咨询
    • 欢迎加入QQ群 16506021
  • 公众号:源宝网络