這幾天在學習flex布局，發現flex真的好厲害！
flex是flexible box的縮寫，意為「彈性布局」，用來為盒模型提供最大的靈活性。
flex是它可以簡單、完整、響應式的實現各種網頁布局，目前已經得到了大多數主流瀏覽器的支援，有關於它的相容性可以在caniuse中的查詢到：
任何乙個容器都可以指定為flex布局
.box
.box
.box
注意：設為flex布局後，子元素的float、clear、vertical-align屬性將失效。
容器共有六個屬性
flex-direction屬性決定主軸的方向，它可能有四個值。
四種值對應的情況如下圖所示：
flex-wrap屬性決定專案在一行排不下的情況下是否換行，它可能有三種值。
三種值對應的情況如下圖所示：
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content屬性定義了專案在主軸上的對齊方式，它可能有五個值。
align-items屬性定義了每行專案在側軸方向上的對齊方式，它也可能有五個值。
-flex-start：側軸開始方向對齊。
-flex-end：側軸結束方向對齊。
-center：側軸居中對齊。
-baseline：專案第一行文字的基線對齊
-stretch：預設值，如果專案未設定高度或高度設為auto，將佔滿整個容器。
假設側軸為從上到下，五種值對應的情況如下圖所示：
align-content屬性定義了容器在側軸方向上有額外空間時，如何每排布一行，當容器只有一行時，它不起作用，它可能有六個值。
假設側軸為從上到下，六種值對應的情況如下圖所示：
專案共有六個屬性
order屬性定義專案的排列順序，數值越小排列越靠前，預設為0，可能的值為任意整數。
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間也不放大。
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍，如下圖所示：
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足該專案將縮小。
負值對該屬性無效,即該屬性可能的值為0或正整數。
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小，如下圖所示：
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main-size）。瀏覽器根據整個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto)（既可以放大佔滿空間，也可縮小） 和none (0 0 auto)（不可放大，也不可縮小）。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性允許單個專案有與其他專案不一樣的側軸對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
其值除auto外，其他與align-items完全一致。
只要記住了這12個屬性，使用flex布局就肯定沒問題啦，在我的github上有幾個關於flex布局的小例子，想複習的朋友可以去試一試，倉庫位址在這裡。
(完)
關於flex布局容器屬性
容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行，第一行在下面...
關於彈性布局flex屬性詳解
flex 復合屬性,設定或檢索彈性盒模型物件的子元素如何分配空間。由以下三個屬性組成 flex grow 用來指定擴充套件比例，即剩餘空間是正值時此flex子項相對於flex容器裡其他flex子項能分配到空間比例，在flex屬性中該值如果被省略則預設為1 flex shrink 用來指定收縮比例，即...
關於Flex布局屬性詳解
一 flex布局是什麼？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首。box 注意，設為flex布局以後，子元素的f...