flex布局初步—

上一节我们掌握了一些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、一般来说，这个经典的布局往往能够适应大多数项目的需要。

flex布局初步——（二）

HTML

CSS

最后效果

总结：

意见和建议