圣杯布局：Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
.HolyGrail{
display: -webkit-flex;
display: flex;
min-height: 100vh;
flex-direction: column;
border:1px solid red;
font-size:16px;
}
header,footer {
flex: 1;
border:1px solid green;
}
.HolyGrail-body {
display: -webkit-flex;
display: flex;
flex: 1;
border:1px solid red;
}
.HolyGrail-content {
flex: 1;
border:1px solid green;
}
.HolyGrail-nav, .HolyGrail-ads {
flex: 0 0 16em;
border:1px solid red;
}
.HolyGrail-nav {
order: -1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>H5标准页面</title>
<link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" />
</head>
<body class="HolyGrail">
<header>...</header>
<section class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</section>
<footer>...</footer>
</body>
</html>
如果是小屏幕，躯干的三栏自动变为垂直叠加。
@media (max- 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}