參考文章：
阮大神的：Flexbox 布局的最簡單表單（主要講解項目item上的屬性）
另一位大神的：布局神器display:flex（整體講解的非常詳細）
之前沒有仔細看flex布局（彈性布局），設置子元素垂直居中都是通過css樣式設置的，最近看了flex的布局方式，感覺太好用了，比以前些樣式還省了許多的代碼，這里把大神們的內容總結一下，就當練習打字給自己做個筆記加深印象好了
（1）彈性布局是一種靈活、響應式的布局方式，目前的主流瀏覽器Chrome21+、Opear12.1+、Firefox22+、Safari6.1+、IE10+都已支持，可以放心使用
（2）彈性布局的使用-彈性布局設置的元素為父元素，其下的所以子元素稱為項目（item），如下，div是父元素，div下面的input和button則稱為項目
<div> <input placeholder="隨便輸入點什么"></input> <button>發送</button> </div>
如果沒有給父元素div設置彈性布局，在瀏覽器上打開可以看到input跟button之間存在空白間隔，如下：
然后我們給div設置彈性布局屬性display:flex，發現input跟button之間的空白間隙消失了，如下：
這是因為彈性布局下，所有的項目（item）之間默認沒有間隔，並且有個特別的地方，就是不給項目設置高度的情況下，所有項目跟父元素等高
（3）設置在父元素上的屬性有：flex-direction、flex-wrap、flex-flow、justify-content、align-item、align-content六種
<div class="test"> <input type="text" placeholder="隨便輸入點什么吧" /> <button>send</button> <div class="hello-world">item1</div> <div class="hello-world">item2</div> <div class="hello-world">item3</div> </div>
.test { width: 500px; height: 100px; display: flex; border: 1px solid red; box-sizing: border-box; /* justify-content: start; */ /* flex-direction: column; */ /* align-items: center; */ } .hello-world { border: 1px solid blue; }
① 項目在父元素下的排列方式屬性 flex-direction：row | row-reverse | column | column-reverse
row --- 默認值，項目橫向排列，第一個項目從父元素的最左邊邊線開始向右進行排列
row-reverse --- 項目橫向排列，第一個項目從父元素的最右邊邊線開始向左排列，如下：
column --- 項目縱向排列，第一個項目從父元素的頂部邊線開始自上而下進行排列
column-reverse --- 項目縱向排列，第一個項目從父元素的底部邊線開始自下而上進行排列
② 項目換行情況flex-wrap：nowrap | wrap | wrap-reverse
<div class="test"> <input type="text" placeholder="隨便輸入點什么吧" /> <button>send</button> <div class="hello-world">item1</div> <div class="hello-world">item2</div> <div class="hello-world">item3</div> <div class="hello-world">item4</div> <div class="hello-world">item5</div> <div class="hello-world">item6</div> <div class="hello-world">item7</div> <div class="hello-world">item8</div> <div class="hello-world">item9</div> </div>
nowrap --- 默認值，不換行，所有項目都在一行展示，空間不足時，會撐破父元素寬度
wrap --- 可換行，排不下的項目在下一行展示，排滿的在第一行展示
wrap-reverse --- 可換行，多出來的項目展示在第一行，排滿的在后面展示
③ flex-flow：即flex-direction和flex-wrap屬性的縮寫，默認值為row nowrap，樣式寫法如下：
.test { flex-flow: row nowrap; }
④ 項目在父元素中水平方向上的對齊方式屬性 justify-content：flex-start | flex-end | center | space-between | space-around
flex-start --- 默認項目在父元素中靠左對齊，項目之間沒有間隔
flex-end --- 靠右對齊，項目之間沒有間隔
center --- 居中對齊，項目之間沒有間隔，且在父元素中處於居中位置
space-between --- 兩端對齊，最靠邊的項目跟左右邊線沒有間隔，同一行上的所有項目間隔相等
space-around --- 居中對齊，兩側間隔相等，且同一行上的項目之間的間隔是兩側間隔的2倍
// 注意：設置項目水平方向上的對齊方式時，此時的項目高度是父元素高度除以項目的總行數，且上下行之間沒有間隔
⑤ 項目在父元素中縱向上的對齊方式align-items：flex-start | flex-end | center | baseline | stretch
stretch --- 默認對齊方式，如果項目未設置高度或高度為auto，那么項目高度值則為：父元素高度除以項目行數，上下行項目之間沒有間隔
flex-start --- 頂部對齊，項目高度自適應，上下行項目之間有間隔
flex-end --- 底部對齊，項目高度自適應，上下行項目之間有間隔
center --- 居中對齊，項目高度自適應，，上下行項目之間有間隔，項目距離父元素頂部和底部的間隔相同
baseline --- 項目第一行的文字基准線對齊，項目高度自適應
⑥ 定義多行項目時的對齊方式align-content：flex-start | flex-end | center | space-between | space-around | stretch
注意：如果項目只有一行時，不能使用此屬性，只能設置flex-wrap屬性
flex-start --- 垂直方向上頂部對齊
flex-end：--- 垂直方向上底部對齊
center --- 多行項目在父元素的垂直方向上居中對齊，
space-bewtne --- 在父元素的上下兩端對齊排列，每一個項目行之間的間隙是相等的
space-around --- 多行項目父元素的上下兩側排列，上下最外側的項目與邊線之間有間隔，且非兩側的項目間隔是最外側項目與父元素邊線間隔的兩倍
stretch --- 默認值，多行的項目占據整個父元素高度，且每一行之間沒有間隔，當未設置項目高度時，同行的項目的高度即最高項目項的高度除以項目的行數
（4）項目的屬性有：order、flex-grow、flex-shrink、flex-basis、flex、align-self
<div class="test2"> <div class="mybox">1</div> <div class="mybox">2</div> <div class="mybox">3</div> <div class="mybox">4</div> <div class="mybox">5</div> <div class="mybox">6</div> <div class="mybox">7</div> </div>
.test2 { width: 500px; height: 100px; display: flex; justify-content: space-between; border: 1px solid blue; box-sizing: border-box; align-items: center; margin-top: 200px; } .mybox { border: 1px solid red; }
項目未設置屬性時的排列：
① order：定義項目的排列順序，數值越小，排列越靠前，數值可以為負數
② flex-grow：項目的放大比例，默認值為0（既不放大，也不縮小），比如一行有兩個項目，其中某一個項目的flex-grow屬性為0，另外一個設置為1，則flex-grow：0的寬度不變，flex-grow屬性的項目占據剩余寬度；若項目的flex-grow屬性都相等，則平分這一行的空間
③ flex-shrink：項目的縮小比例，默認值為1，且不能為負數；當同一行中所其他項目為1，一個項目的flex-shrink屬性為0時，當空間不足時，flex-shrink為0的項不縮小，其他項目會縮小，若所有項目的flex-shrink都為0，那么空間不足時，會撐破父元素
④ flex-basis：為項目分配指定大小的空間，比如給其中一個項目設置flex-basis：350px，則這個項目在空間充足的情況下，其寬度為350px，當空間不足時，實際該項目的寬度值會小於設置的值
空間足夠時：
空間不足時：
⑤ flex：flex屬性是flex-graw、flex-shrink、flex-basis三個屬性結合，默認值為 0 1 auto，第一個屬性是必須的，后兩個屬性可選
⑥ align-self：允許設置單個項目對齊方式，可設置值有auto、flex-start、flex-end、center、baseline、stretch，因為這個屬性是繼承與父元素的align-items屬性，假如所有項目是統一對齊樣式，則直接在父元素上進行設置align-items屬性即可，如果有的項目的對齊方式不一樣，可針對這個項目使用align-self進行設置，用法跟align-items屬性一樣
最后說一下flex彈性布局的優缺點吧，優點是布局容易上手，比較容易使用，缺點是：對IE10以下的瀏覽器還是沒能兼容到，其他瀏覽器倒是兼容的比較好了。。。