原文地址：http://www.cnblogs.com/nuannuan7362/
一、簡要介紹
css3最喜歡的新屬性之一便是flex佈局屬性，用六個字概括便是簡單、方便、快速。
flex（ flexible box：彈性佈局盒模型）,是2009年w3c提出的一種可以簡潔、快速彈性佈局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支持：
其中在webkit內核的瀏覽器中使用時，必須加上-webkit-前綴，以下不再重複說明。
下圖爲flex的相關概念的示意圖
使用flex佈局的容器（flex container），它內部的元素自動成爲flex項目（flex item）。容器擁有兩根隱形的軸，水平的主軸（main axis），和豎直的交叉軸。主軸開始的位置，即主軸與右邊框的交點，稱爲main start；主軸結束的位置稱爲main end；交叉軸開始的位置稱爲cross start；交叉軸結束的位置稱爲cross end。item按主軸或交叉軸排列，item在主軸方向上佔據的寬度稱爲main size，在交叉軸方向上佔據的寬度稱爲cross size。
此外，需注意使用flex容器內元素，即flex item的float，clear、vertical-align屬性將失效。
二、屬性總結表
下圖是關於flex的屬性總結表，後面會詳細介紹每個屬性的意義和用法
三、容器屬性詳述
1.flex-direction
決定主軸的方向，即項目排列的方向，有四個可能的值：row(默認)|row-reverse|column|column-reverse
row:主軸爲水平方向，項目沿主軸從左至右排列
column：主軸爲豎直方向，項目沿主軸從上至下排列
row-reverse：主軸水平，項目從右至左排列，與row反向
column-reverse：主軸豎直，項目從下至上排列，與column反向
2、flex-wrap
默認情況下，item排列在一條線上，即主軸上，flex-wrap決定當排列不下時是否換行以及換行的方式，可能的值nowrap(默認)|wrap|wrap-reverse
nowrap：自動縮小項目，不換行
wrap：換行，且第一行在上方
wrap-reverse：換行，第一行在下面
3、flex-flow
是flex-direction和flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。默認值爲row nowrap，即橫向排列 不換行。
4、justify-content
決定item在主軸上的對齊方式，可能的值有flex-start（默認），flex-end，center，space-between，space-around。當主軸沿水平方向時，具體含義爲
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分佈
效果如下圖
5、align-items
決定了item在交叉軸上的對齊方式，可能的值有flex-start|flex-end|center|baseline|stretch，當主軸水平時，其具體含義爲
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當item未設置高度時，item將和容器等高對齊
效果圖如下：
6、align-content
該屬性定義了當有多根主軸時，即item不止一行時，多行在交叉軸軸上的對齊方式。注意當有多行時，定義了align-content後，align-items屬性將失效。align-content可能值含義如下（假設主軸爲水平方向）：
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分佈
stretch：各行將根據其flex-grow值伸展以充分佔據剩餘空間
效果圖如下
四、flex item屬性詳述
item的屬性在item的style中設置。item共有如下六種屬性
1、order
order的值是整數，默認爲0，整數越小，item排列越靠前，如下圖所示代碼如下
<div class="wrap">
<div class="div" style="order:4"><h2>item 1</h2></div>
<div class="div" style="order:2"><h2>item 2</h2></div>
<div class="div" style="order:3"><h2>item 3</h2></div>
<div class="div" style="order:1"><h2>item 4</h2></div>
</div>
效果圖爲
2、flex-grow
定義了當flex容器有多餘空間時，item是否放大。默認值爲0，即當有多餘空間時也不放大；可能的值爲整數，表示不同item的放大比例，如
<div class="wrap">
<div class="div" style="flex-grow:1"><h2>item 1</h2></div>
<div class="div" style="flex-grow:2"><h2>item 2</h2></div>
<div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>
即當有多餘空間時item1、item2、和item3以1：2:3的比例放大。
3、flex-shrink
定義了當容器空間不足時，item是否縮小。默認值爲1，表示當空間不足時，item自動縮小，其可能的值爲整數，表示不同item的縮小比例。flex-grow
4、flex-basis
表示項目在主軸上佔據的空間，默認值爲auto。如下代碼
<div class="wrap">
<div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
<div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
<div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div>
其效果圖爲
5、flex
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和。
6、align-self
align-self屬性允許item有自己獨特的在交叉軸上的對齊方式，它有六個可能的值。默認值爲auto
auto：和父元素align-self的值一致
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當item未設置高度時，item將和容器等高對齊
