由於公司專案，一直需要支援ie9；導致作為5年的前端，居然對flex不是熟記於心，不得不二次學習下，（雖然之前學過，寫過demo,但長時間不用，忘了，唉唉唉）
記住flex 布局核心是，彈性，拋棄了 display position float的布局方式；
1. 首先容器明確他的2個軸main axis / cross axis
2. 父容器有6個屬性：(排列方向 換行 主軸/交叉軸/多根軸對齊方式 )
flex-direction flex-wrap flex-flow
justify-content align-items align-content
order flex-grow flex-shrink flex-basis flex align-self
主軸方向：
flex-direction： row/row-reverse/column/column-reverse
換行方式：
flex-wrap：nowrap/wrap/wrap-reverse
主軸與換行：
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：flex-start/flex-end/center/space-between/space-around/stretch
order:0; 預設順序
flex-grow:0 /1/2/10/....
當空間多餘時，將多餘的空間，按照放大比例去放大。
例如當3個子元素的該值分別是1 3 無；多出100px，
則分別在各自的寬高上增加100*1/(1+3) 75px 0;
當空間不足時，該值失效，會按照各自原本的寬高比例去縮放
例如當3個子元素的該值分別是1 3 無;各自寬度是50 ,200 50 ，總寬是200;
則最終是200*50/(50+200+50),200*200/(50+200+50),200*50/(50+200+50)
當空間不足時 不足的空間，由子元素通過收縮因子去減小
例如：當3個子元素的該值分別是1 3 沒設定;各自寬度是50 ,200 50 ，父總寬是200;
則分別是50-100*50*1/(1*50+3*200+1*50);
200-100*200*3/(1*50+3*200+1*50);
50-100*50*1/(1*50+3*200+1*50);;
當空間多餘時，該值失效 無意義。
flex-basis 規定的是子元素的基準值。初始長度。所以是否溢位的計算與此屬性息息相關。
應用準則：
content –> width –> flex-basis (limted by max|min-width)
flex-basis與width同在時，以flex-basis為準。
建議使用flex-basis，而非直接給定width
但max-width min-width能限制flex-basis。
即：flex-basis: 250px; max-width: 100px; 最終寬度會是100px；
即：flex-basis: 100px; min-width: 250px; 最終寬度會是100px；
注意：
有flex-basis，有寬高，沒設定flex-shrink。flex-grow，空間不足或多餘時，都以該值為準，不收縮，也不擴張。
空間不足時，有flex-shrink,且有寬度,以flex-basis為基準，去計算不足的空間
align-self：**,取代align-items;item有自己獨特的在交叉軸上的對齊方式
不容易理解的屬性解釋：
flex-basis :表示在不伸縮的情況下子容器的原始尺寸。主軸為橫向時代表寬度，主軸為縱向時代表高度。
flex-wrap：設定換行方式,決定子容器是否換行,順序換行還是支援逆序換行。
align-content:多行沿交叉軸對齊：當子容器多行排列時，設定行與行之間的對齊方式。
flex 是 flex-grow、flex-shrink、flex-basis的縮寫
flex 的預設值是 0 1 auto。
當 flex 取值為 none，則計算值為 0 0 auto，
當 flex 取值為 auto，則計算值為 1 1 auto，
當 flex 取值為 1，則計算值為 1 1 0%，
當 flex 取值為乙個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情況（注意 0% 是乙個百分比而不是乙個非負數字）：
當 flex 取值為兩個非負數字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，
當 flex 取值為乙個非負數字和乙個長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1，
flex:24px; // 1 1 24px
flex:0%; // 1 1 24px
flex:2 ; // 2 1 0%
flex:2 3; // 2 3 0%
flex:2 20%; // 2 1 20%
用flex 寫乙個聖杯布局：
1234
56 ddd
.gg.
..gg.
..gg.
..fgfgfg.
flex學習筆記
2.mxml中類例項 class instance 和屬性 property 的區別 關鍵是看命名空間後面第乙個字母的大小寫。如果第乙個字母是大寫，例如button中的b，就說明這行 引用的是乙個類的例項。如果第乙個字母是小寫，例如label中的l，就說明是在設定乙個類的屬性。3.在mxml中，資料...
flex學習筆記
一 獲取當前時間 var dt date new date 二 date string var temp string dt.fullyear.tostring dt.month 1 tostring dt.date.tostring dt.hours.tostring dt.minutes.tos...
flex學習筆記
參考文章 1 flex none auto 其中 flex grow 分配固定空間 flex shrink 剩餘空間富餘時，該如何分配 flex basis 剩餘空間不足時，該如何分配 先設定個最小值，保證空間不足時還能分配到保底的空間 合法的寫法有 flex auto flex none 1個值，...