css高度自适应-flex弹性布局

写网页遇到页面高度无法自适应，查阅了资料学到了下列方式：

<div id="container">
	<div class="header"></div>
	<div class="middle"></div>
	<div class="footer"></div>
</div>

css主要部分：

#container{
	display:flex;
	min-height:100%;
	flex-direction: column;
}
.middle{
	flex:1;
}

关于flex布局部分知识：

1. flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：
row:默认值，主轴沿水平方向从左到右
row-reverse: 主轴沿水平方向从右到左
column: 主轴沿垂直方向从上到下
column-reverse: 主轴沿垂直方向从下到上
initiai: 将此属性设置为属性的默认值
inherit: 从父元素继承此属性的值

2. flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：
nowrap 默认值，表示项目不会换行
wrap 表示项目会在需要时换行
wrap-reverse 表示项目会在需要时换行，但会以相反的顺序
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

3. flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：
flex-flow: flex-direction flex-wrap;

4. justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：
flex-start 默认值，左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔是相等的
space-around 每个项目两侧的间隔相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

5. align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：
stretch 默认值，项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
baseline 项目与容器的基线对齐
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

6. align-content

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：
stretch 默认值，将项目拉伸以占据剩余空间
center 项目在容器内居中排布
flex-start 项目在容器的顶部排列
flex-end 项目在容器的底部排列
space-between 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承该属性的值