參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex布局總結：
任何一個元素都可以使用flex布局，塊級元素.box{display:flex}，行內元素為.box{display: inline-flex};
容器有六大屬性
1、flex-direction? ：row、row-reverse、column、column-reverse
①、（默認）row，水平軸的方向，起點在左端
②、row-reverse，水平軸的方向，起點在右端（flex-direction:row-reverse）
③、column，垂直方向，起點在上端
④、column-reverse?? 垂直方向，起點下端
2、flex-wrap?? 如何換行
①、（默認）nowrap：不換行
②、wrap 換行（第一行在上面）（中間空那么多是因為第二行與第一行的間距和第二行與下邊框間距相等）
③、wrap-reverse 換行（第一行在下面，起點在縱軸下邊）
3、flex-flow：為flex-direction和flex-wrap的縮寫
??? 默認為flex-flow：row nowrap
4、justify-content：水平軸的對齊方式
①、（默認）flex-start：左對齊
②、flex-end：右對齊
③、center：居中對齊
④、space-between：兩端對齊（元素之間距離相等）
⑤、space-around：每個元素兩側間隔相等，所以元素之間的間隔比元素與邊框間隔大一倍
5、align-items：縱軸對齊方式
①、flex-start：縱軸起點對齊
②、flex-end：縱軸終點對齊
③、center：縱中點對齊
④、baseline 項目的第一行文字的幾線對齊
⑤、（默認）stretch如果項目沒有設置高度或者高度為auto，則將占滿
6、align-content：多根軸線的對齊方式，如果只有一根軸線則該屬性無效（多行）
①、flex-start：與縱軸起點對齊
②、flex-end：與縱軸終點對齊
③、center：與縱軸中點對齊
④、space-between：與縱軸兩端對齊，軸線之間間隔平均分布
⑤、space-around：每根橫軸兩側的間隔相等，所以橫軸之間的間隔比橫軸與邊框的距離大一倍
⑥、stretch：如果元素沒有設置高度或者為auto。將沾滿整個容器
二、元素的屬性
1、order：屬性定義元素的排列順序，數值越小，排列越靠前 order：integer（整數）
②、flex-grow：元素的放大比例，默認為0，即如果剩余空間也不放大 flex-grow:number
<li style='flex-grow:1'>5</li>
3、flex-shrink：number 元素縮小比例，默認為1，即如果空間不足將會縮小
4、flex-basis：length/auto在分配多余空間之前，元素占據的主軸空間，瀏覽器根據這一屬性，計算主軸是否有空余空間，默認為auto，即元素本來的大小。它可以設為跟width和height一樣的值（如10px）即項目占據固定空間
5、flex：flex-grow flex-shrink? flex-basis（0 1 auto）建議優先使用該屬性
6、align-self：auto | flex-start | flex-end | center | baseline | stretch;
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
