CSS 使用Flexbox的圣杯布局
示例
HolyGrail布局是具有固定高度的页眉和页脚以及中心带有3列的布局。这3列包括一个固定宽度的sidenav，一个流体中心以及一个用于其他内容（例如广告）的列（流体中心在标记中排在最前面）。CSSFlexbox可以通过非常简单的标记来实现此目的：
HTML标记：
<div class="container">
<header class="header">Header</header>
<div class="content-body">
<main class="content">Content</main>
<nav class="sidenav">Nav</nav>
<aside class="ads">Ads</aside>
</div>
<footer class="footer">Footer</footer>
</div>CSS：
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 50px;
}
.content-body {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
.content-body .content {
flex: 1 1 auto;
overflow: auto;
}
.content-body .sidenav {
order: -1;
flex: 0 0 100px;
overflow: auto;
}
.content-body .ads {
flex: 0 0 100px;
overflow: auto;
}
.footer {
flex: 0 0 50px;
}演示版