Flex是Flexible Box的縮寫，意爲"彈性佈局"，Flex佈局將會是未來佈局的首選方案，因爲非常便捷，有必要好好學習下。不過目前瀏覽器支持不是很好，IE11開始才支持。
網上寫的各種Flex的文章都說IE10也支持的，我想說，我像你保證IE10不支持的，至少不支持Flex裏面的所有屬性，所以既然只有IE11開始的瀏覽器才支持，那麼它的使用就可以緩一緩再說，現在只作爲概念類項目的學習之用。
下面就來看一下各家瀏覽器的支持情況，“+”表示包括且大於的意思，先上圖。
Flex裏的新鮮概念剖析
Flex是個蠻複雜的佈局，在學習之前，先來了解下有關Flex裏的新鮮概念。假設我們看到下圖的紫色html元素它是彈性佈局的，我們就稱其爲Flex container，意思是彈性的容器。
它有兩個直接的子元素，我們稱之爲Flex item，意思是彈性的元素。
我們把Flex item排列的方向稱爲main axis，意思是主軸。
而跟主軸垂直的方向，我們把它稱爲cross axis，意思是輔軸。
這些概念我們在下面會經常使用到，所以先要記住。
那麼我們如何設置彈性佈局呢，只要display:flex就搞定了，那麼Flex item又是什麼呢，即設置過display:flex的html元素它在文檔流中的子元素就是Flex item了。
判斷哪些是有效的Flex item
並不是設置過display:flex的html元素它裏面的任何元素都是Flex item。而是它的在文檔流中的子元素纔是Flex item。兩個條件，一是在文檔流中，二是子元素。下面我們就來判斷下哪些是有效的Flex item？
float元素是在文檔流中的子元素，因此算Flex item，absolute絕對定位的元素是脫離文檔流的，不能算，至於最後一個是孫元素，也不能算。
彈性佈局的特性
接下來我們來講講彈性佈局的特性，從三個方面來講，分別是排列方向、彈性、對齊。
排列方向
排列方向有關的屬性有這些：flex-direction（彈性的方向）、flex-wrap（彈性的換行）、flex-flow（flex-direction 和 flex-wrap 屬性的複合屬性）、order（順序）。下面分別來介紹下。
（1）首先我們來看一下flex-direction（彈性的方向），它的語法如下：
flex-direction:row|row-reverse|column|column-reverse;
flex-direction是設置彈性佈局的方向，默認是row。
（2）接下來我們來看一下flex-wrap（彈性的換行），它的語法如下：
flex-wrap:nowrap|wrap|wrap-reverse;
flex-wrap是設置彈性佈局的換行，默認是nowrap，即不換行。
（3）接下來我們來看一下flex-flow，它是flex-direction 和 flex-wrap 屬性的複合屬性，它的語法如下：
flex-flow:flex-direction||flex-wrap;
默認是row nowrap，即橫方向排列且不換行。
使用時建議使用複合屬性flex-flow，非單獨屬性flex-direction 和 flex-wrap。
（4）再來看一下order（順序），默認值爲0。它的語法如下：
order:number;
order:1的元素大於order：0的另兩個元素，於是順序就調換了。order的值爲整數，可負數。
彈性
彈性有關的屬性有這些：flex-basis（設置flex-item的初始寬高）、flex-grow、flex-shrink。下面分別來介紹下。
（1）首先我們來看一下flex-basis（設置flex-item的初始寬高），它也會作爲以後設置彈性的基礎，它的語法：
flex-basis: number|auto|initial（默認）|inherit;
這裏要提一下，如果設置默認值的話，若該彈性元素是橫向排列的，即爲主軸main axis的寬度，若是縱向排列的，即爲輔軸cross axis，也就是高度了。
（2）接下來我們來看一下flex-grow，該屬性用於設置彈性盒的能分配到的剩餘空間的擴展比率。如果元素不是彈性盒對象的元素，則 flex-grow 屬性不起作用。默認值是0，它的語法：
flex-grow: number;
（3）接下來我們來看一下flex-shrink，它是設置彈性元素的能分配到的剩餘空間的收縮比例，默認值是1，它的語法：
flex-shrink: number;
(4)接下來我們來講講flex這個複合屬性，它的語法：
flex: flex-grow||flex-shrink||flex-basis;
使用時建議使用複合屬性flex。
對齊
對齊有關的屬性有這些：justify-content(設置主軸方向的對齊方式)、align-items(設置輔軸方向的對齊方式)、align-self、align-content。下面分別來介紹下。
（1）首先我們來看一下justify-content(設置主軸main-axis方向的對齊方式)，它的語法：
justify-content: flex-start|flex-end|center|space-between|space-around;
（2）接下來我們來看一下align-items(設置輔軸cross-axis方向的對齊方式)，它的語法：
align-items: flex-start|flex-end|center|baseline|stretch;
看的清楚麼？看不清楚我們再換一張效果圖：
（3）接下來我們來看一下align-self（設置單個flex item在cross-axis方向上的對齊方式），它的語法：
align-self: auto|flex-start|flex-end|center|baseline|stretch;
這個跟align-items差不多，所以效果圖就不放了。
（4）接下來我們來看一下align-content（設置cross-axis方向上行的對齊方式），它的語法：
align-content: auto|flex-start|flex-end|center|space-between|space-around|stretch;
align-content是當出現多行時，多行如何對齊，可以看到上圖有三行，圖中顯示就是三行的分別對齊方式。
總之：flex彈性佈局的基礎知識講完了，以後有空會補充實例篇。