相對於舊版的flex'佈局而言，新版的flex佈局新增了不少舊版沒有的屬性，進而能夠實現舊版flex實現不了的佈局。web
其實，嚴格來講，在舊版flex中，沒有側軸的概念，項目在容器中不會本身換行，即項目不會按照側軸的方向進行堆砌，可是在新版的flex佈局中，能夠對側軸進行更好的控制。佈局
flex-wrap：控制容器可是單行/列，多行/列，而且控制側軸的方向，項目按照側軸的方向進行堆砌學習
屬性值：nowrap（默認值---沒有側軸） wrap（側軸正方向） wrap-reverse（側軸反方向）flex
flex-content：控制容器多行、多列的富裕空間的管理spa
屬性值：flex-start、flex-end、center、space-between、baseline、stretchit
flex-flow：控制主軸和側軸的方向及其位置（flex-direction和flex-wrap的簡寫形式）io
屬性值：row wrap/ row wrap-reverse/ column wrap/ column wrap-reverse容器
容器新增屬性體如今側軸上基礎
order：控制項目在主軸上排列的順序，值越大項目越日後靠擴展
屬性值：num（數值）
align-self：管理項目自身的富裕空間
屬性值：適用富裕空間管理的屬性值
flex-shink：控制項目收縮的空間 （必須時單行，不然會失效）
屬性值：收縮因子（默認值：0）
flex-basis：伸縮規則計算的基準值（默認值爲項目的width/height）
屬性值：num（數值）
flex：flex的簡寫形式
屬性值：num（數值）
一般flex：1 實現等分佈局
flex：1 ---表示--- flex-grow：1 flex-shrink：1 flex-basis：0
實現經典等分佈局
flex-grow（伸縮—項目空間擴大）
a.可用空間 = 容器大小—全部相鄰flex-basis的總和
b.可擴展空間 = 可用空間/全部相鄰項目flex-grow的總和
---可擴展空間和富裕空間：兩者不一樣
當flex-basis的值爲默認值（項目的width/height），富裕空間就是可擴展空間；當flex-basis不爲默認值，富裕空間是富裕空間，可擴展空間是可擴展空間
c.每項伸縮大小 = 伸縮基準值（flex-basis）+（可擴展空間*flex-grow）
flex-shrink（收縮—項目空間縮小）
a.計算收縮因子*基準值的總和
a = 每一項flex-basis*flex-shrink之和
b.計算收縮因數
收縮因數 = （項目收縮因子*項目基準值）/第一步總和
b = （ flex-shrink*flex-basis）/a
c.移除空間的計算
移除空間 = 項目收縮因數 * 負溢出的空間（收縮嘛因此是負的 好理解一點）
c = b * 溢出的空間
1.側軸的富裕空間管理
a.單行/列
align-items：單行/列的富裕空間
align-self：管理項目自身的富裕空間（單行/列的富裕空間） 優先級比align-items高
b.多行/列
align-content：多行/列的富裕空間
2.舊版的flex的富裕空間管理
舊版富裕空間管理（-webkit-box-flex）：只是管理富裕空間的位置，並不會分配到項目身上
3.容器和項目的概念
容器：外層的包裹器
佈局排列方向：控制主軸的方向和位置（flex-direction）
富裕空間管理：主軸富裕空間、側軸富裕空間（單行的 align-items）、多行/多列的富裕空間管理（align-content）
側軸：控制多行多列，就存在側軸的概念了（flex-wrap）
項目：容器裏的元素
項目能夠彈性空間的管理：就是把富裕空間按照必定的比列分配給項目
收縮、伸縮：flex-grow、flex-shrink
收縮、伸縮的基準：flex-basis
改變項目的排列的前後順序（項目永遠是按照主軸的正方向排列）：order屬性
總結
學習了兩天的flex佈局，主要是要理解四個概念，一個規則。萬變不離其宗。
什麼是容器？什麼是項目？哪一個是主軸？哪一個是測軸？項目永遠按照主軸的正方向排列。
這些是基礎中的基礎，這裏理解了才能往下學習啊。在學習新版flex新增的屬性中，主要是學習容器和項目的API,還有一部分的重難點就是收縮和伸縮規則，在計算時，會有一些隱晦，要增強理解。
對比着學習是一種不錯的學習方式，要繼續努力了！！！