参考博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex布局是w3c于09年提出的，用于简便，整洁，响应式地解决布局问题的手段，例如垂直居中布局。flex全称Flexible Box，也称“弹性布局”。
块级元素设置flex布局：display:flex
行内元素设置flex布局：display:inline-flex
当设置flex属性之后，元素的float，vertical-align和clear样式将失效。
flex主要属性：主轴（main axis）+交叉轴（cross axis），主轴开始位置（main start），结束位置（main end），交叉轴开始位置（cross start），结束位置（cross end），单个项目占据的主轴空间（main size），单个项目占据的交叉轴空间（cross size）
一、容器的属性（6个）
1.flex-direction，决定了主轴的方向，属性值如下：
row：水平方向，起点在左边
row-reverse:水平方向，起点在右边
column:垂直方向，起点在上边
column-reverse:垂直方向，起点在下边
2.flex-wrap，定义了如果轴线排不下如何换行
nowrap:默认不换行
wrap:换行
wrap-reverse：换行，第一行在下方
3.felx-flow:flex-direction+flex-wrap，如写作：flex-flow:row wrap
4.justify-content:定义了元素在主轴的对齐方式
5.align-items:定义了元素在交叉轴的对齐方式
6.align-content:定义了多行情况下（多根轴线）的对齐方式，只有一根轴线的话该属性无效
二、项目属性（6个）
1.order：定义项目的排列顺序，数值越小越靠前，默认为0
2.flex-grow：定义项目的放大比例，默认为0，空间足够也不放大
3.flex-shrink（无负值）：定义项目的缩小比例，默认为1，空间不够则缩小
4.flex-basis：定义了项目占据的主轴空间，如设置flex-basis:300px，则项目占据固定大小，默认auto
5.flex：上述2-4的属性的汇总写法，默认0,1,auto，快捷写法：auto（1 1 auto）和none（0 0 auto）
6.align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认继承align-items属性，
三、利用flex布局来优化项目布局，效果如下：
1.导航条
样式设置如下，主轴用了space-around布局，交叉轴用了center属性，利用flex布局来实现水平垂直居中真的是很简单。
#nav-bar { display: flex; justify-content: space-around; align-items: center; height: 80px; background-color: #2C3E50; }
2.主页面
因为目前主页面的内容实在是太少了，所以想着要做一个效果就是让div自动填满屏幕余下的高度，也就是上图效果，清晰一点用手机看的话是这样，一直铺满余下空间：
正确简单的做法是利用flex布局：
1.给html body标签都设置height:100%
2.上图div的父div设置为flex布局，项目里父div是#app，样式如下：
#app { display: flex; flex-direction: column; height: 100%; }
3.然后是设置上图div，添加样式：flex:1，如下：
#main-page { flex: 1; /*这个属性是为了让div填满剩余屏幕高度*/ width: 100%; background-color: #DCDCDC; }
ps：还有另外一种实现方法，但是存在问题，就是直接设置子div（#main-page）的height:100%，但是这样会存在一个问题，因为项目中导航条这个div是有固定高度80px的，所以如果设置了#main-page的height:100%，那么页面高度会溢出80px，也就是会出现滚动条，目前没有想到比较好的解决方法。
后面基本都是利用felx布局把页面布局全部修改了一遍，还是比较简单的。