flexbox是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
flex屬性是用於設定彈性盒子的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex: auto; 等價於 flex: 1 1 auto;
flex: none; 等價於 flex: 0 0 auto;
flex: init; 等價於 flex: 0 1 auto;
複製**
屬性用於設定或檢索彈性盒子的擴充套件比率。 簡單說就是父元素（彈性盒子）的剩餘空間的分配比率。
flex-grow: number|initial|inherit;
複製**
例如：只有子元素使用flex-grow
left
主要內容
right
.left, .right
.container
.main
複製**
如上圖所示：剩餘空間 = 500 - 100*2 = 300，而.main設定了flex-grow: 1; .main佔據了所有的剩餘空間。
例：多個子元素使用flex-grow
樣式設定如下，.main和.right都使用flex-grow屬性把彈性盒子的剩餘空間分成3份，其中.main佔據2份，.right佔據1份。圖2是應用該樣式的結果。從圖2看出除了本身的100px的寬度之外，還佔據了剩餘空間的一部分。
.right
.main
複製**
根據圖3很清楚的看出.main除去佔據剩餘空間的2份外，本身文字也自動有了寬度，所以：
.mian的寬度 = .mian文字的寬度 + 2份剩餘空間
.right的寬度 = 本身的100px寬度 + 1份剩餘空間
圖3 注：flex-grow可應用於動畫顯示。js設定object.style.flexgrow="5"
flex-basis 屬性用於設定或檢索彈性盒伸縮基準值。
flex-basis: number|auto|initial|inherit;
複製**
.left, .right
main
複製**
如上圖可見，.left和.right設定flex-basis：100px和設定width：100px效果一樣（見圖1）。
.flex-left, .flex-right
複製**
.flex-left, .flex-right
複製**
flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在預設寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
default: 1
flex-shrink: number|initial|inherit;
複製**
.container2
.container2>div
.container2>.section1
.container2>.section2
.container2>.section3
.container2>.section4
.container2>.section5
section1
section2
section3
section4
section5
複製**
根據**，父容器的寬度是500px，而每個子元素section都預設了120px的寬度，子元素的總寬度大於父容器的寬度，但是根據圖來看，每個子元素實際的寬度是100px（包含border的寬度）,並沒有超出總寬度。
再看：
.container2>.section1
.container2>.section2
.container2>.section3
.container2>.section4
.container2>.section5
複製**
這兩個圖看出了，section1要比section2\3\4\5都大，但是又不等於150px；
子元素總寬度：150 + 120 + 120 + 120 + 120 = 630
section1佔據比例寬度：500 * 150/630 = 119.0476
section2佔據比例寬度：500 * 120/630 = 95.2380
section3佔據比例寬度：500 * 120/630 = 95.2380
section4佔據比例寬度：500 * 120/630 = 95.2380
section5佔據比例寬度：500 * 120/630 = 95.2380
正好是實際的寬度。
再看：
.container2>div
.container2>.section1
.container2>.section2
.container2>.section3
.container2>.section4
.container2>.section5
複製**
根據上述公式計算section3的寬度：
500 * 80/590 = 67.7966
和實際結果符合。
由此可見：width|flex-basis屬性本身就有按比例分配規則。
（2）設定flex-shrink
.container2>.section1
.container2>.section2
.container2>.section3
.container2>.section4
.container2>.section5
.shrink1
.shrink2
section1
section2
section3
section4
section5
複製**
分析：本例中section1、section2、section3 顯式定義了 flex-shrink 為 1，section4、section5 定義了 flex-shrink 為 2，所以計算出來總共將剩餘空間分成了 7 份，其中 section1、section2、section3佔 1 份，section4、section5 佔 2 份，即收縮比例為1:1:1:2:2。 section1收縮比例：1/7
section2收縮比例：1/7
section3收縮比例：1/7
section4收縮比例：2/7
section5收縮比例：2/7
父容器定義為 500px，子項被定義為 120px，子項相加之後即為 600 px，超出父容器 100px。
於是我們可以計算section1/2/3/4/5 將被移除的溢位量是多少：
section1收縮寬度：100 * 1/7 = 14.28
section2收縮寬度：100 * 1/7 = 14.28
section3收縮寬度：100 * 1/7 = 14.28
section4收縮寬度：100 * 2/7 = 28.57
section5收縮寬度：100 * 2/7 = 28.57
最後： section1實際寬度：120 - 14.28 = 105.72 section2實際寬度：120 - 14.28 = 105.72
section3實際寬度：120 - 14.28 = 105.72
section4實際寬度：120 - 28.57 = 91.43
section5實際寬度：120 - 28.57 = 91.43
o(╥﹏╥)o貌似多出了0.02...，先這樣吧。。。
如有錯誤，請指出。
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學習筆記
由於公司專案，一直需要支援ie9 導致作為5年的前端，居然對flex不是熟記於心，不得不二次學習下，雖然之前學過，寫過demo,但長時間不用，忘了，唉唉唉 記住flex 布局核心是，彈性，拋棄了 display position float的布局方式 1.首先容器明確他的2個軸main axis c...