Flexbox解决sticky footer问题

html标签元素为：

<header> 
	<h1>Site name</h1> 
</header> 
<main> 
	<p>Bacon Ipsum dolor sit amet... <!-- Filler text from baconipsum.com --></p> 
</main> 
<footer> 
	<p>© 2015 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> 
</footer>

首先，我们需要在元素上设置display:flex。如果父元素()的三个块元素，使用Flexbox切换布局，还需要设置flex-flow:column，否则这三个块会排成一行。
从实际出发，需要给设置min-height值为100vh，让内容不足视窗高度时也能占据整个视窗。
即使给指定了最小高度，但每个盒子的高度仍取决于其内容大小。

body { 
	display: flex; 
	flex-flow: column; 
	min-height: 100vh; 
} 
main {
 	flex: 1;
}

flex属性是flex-grow、flex-shrink和flex-basis三个属性缩写。任何元素设置了flex大于0，元素就会灵活的控制自己的尺寸，来适配容器的剩余空间。例如，如果设置了flex:2，

设置了flex:1，那么页脚的高度是主内容高度的二分之一，同样的，如果值设置的是4和2而不是2和1，他们效果是一样的，因为他们的倍数比例值一样。