flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
浏览器私有属性： -moz  -o -webkit  -ms
display:    flex   inline-flex
flex-direction: row    row-reverse  column  column-reverse
flex-wrap:   nowrap   wrap   wrap-reverse
flex-flow: flex-direction和flex-wrap的结合，例如 flex-flow row nowrap
justify-content: 定义伸缩项目在主轴线的对齐方式   flex-start  flex-end  center space-between space-around
align-items: 定义伸缩项目在交叉轴的对齐方式   flex-start   flex-end  center   baseline   stretch
align-content: 定义伸缩项目换行后在交叉轴的对齐方式  stretch  flex-start flex-end center  space-between space-around 

order: 排序，默认为0，数字越小越排前面。
flex-grow: 放大比例，默认为0，伸缩是按比例来算的，假设一共3个元素，第一个和第三个是1，第二个是2，那么第二个的伸缩比例是其他的两倍
flex-shrink: 收缩比例，其他同上
flex-basis: 伸缩项目的基准值，默认值auto，还有length
flex: 等同于 flex-grow flex-shrink  flex-basis
align-self: 该元素在交叉轴的位置(如果交叉轴为垂直的话，只有不设置高度，才能看到streach效果,如果交叉轴为水平的话，只有不设置宽度，才能看到streach效果。总之宽度和高度优先于stretch)