首先为页面设置基本属性（针对整个页面，而非class）
html{ height: 100%;}
body{ display: flex; flex-direction: column; height: 100%;}
然后开始设置header,body,footer
header
header{
/* 我们希望 header 采用固定的高度，只占用必须的空间 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
body
.main-content{
/* 将 flex-grow 设置为1，该元素会占用全部可使用空间 而其他元素该属性值为0，因此不会得到多余的空间*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer
footer{
/* 和 header 一样，footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
