上一节我们掌握了一些flex布局的基础知识，这一节我们用flex来做一个圣杯布局
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../common/reset.css">
<link rel="stylesheet" href="./css/style.css">
<title>flexbox example2</title>
</head>
<body>
<header>Header</header>
<div id="main">
<article>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
<p>Article<p>
</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>CSS
#main {
display:flex;
/**
* 我们将 box-sizing:border-box 应用于所有元素，上述最小高度计算相当简单。如果我们没有这样做，我们还需要在要减去的数量中包含填充。
*/
min-height: calc(100vh - 40vh);
height: calc(100vh - 40vh);
}
#main >article {
flex:1;
overflow-y:auto;
}
#main >nav, #main >aside{
flex: 0 0 20vw;
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}最后效果
总结：
1、以前的圣杯布局往往是利用float或者margin等属性，现在采用flex布局代码非常容易理解。
2、一般来说，这个经典的布局往往能够适应大多数项目的需要。
