Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，F(xiàn)lex布局將會(huì)是未來(lái)布局的首選方案，因?yàn)榉浅１憬?，有必要好好學(xué)習(xí)下。不過(guò)目前瀏覽器支持不是很好，IE11開(kāi)始才支持。
網(wǎng)上寫(xiě)的各種Flex的文章都說(shuō)IE10也支持的，我想說(shuō)，我像你保證IE10不支持的，至少不支持Flex里面的所有屬性，所以既然只有IE11開(kāi)始的瀏覽器才支持，那么它的使用就可以緩一緩再說(shuō)，現(xiàn)在只作為概念類(lèi)項(xiàng)目的學(xué)習(xí)之用。
下面就來(lái)看一下各家瀏覽器的支持情況，“+”表示包括且大于的意思，先上圖。
Flex里的新鮮概念剖析
Flex是個(gè)蠻復(fù)雜的布局，在學(xué)習(xí)之前，先來(lái)了解下有關(guān)Flex里的新鮮概念。假設(shè)我們看到下圖的紫色html元素它是彈性布局的，我們就稱其為Flex container，意思是彈性的容器。
它有兩個(gè)直接的子元素，我們稱之為Flex item，意思是彈性的元素。
我們把Flex item排列的方向稱為main axis，意思是主軸。
而跟主軸垂直的方向，我們把它稱為cross axis，意思是輔軸。
這些概念我們?cè)谙旅鏁?huì)經(jīng)常使用到，所以先要記住。
那么我們?nèi)绾卧O(shè)置彈性布局呢，只要display:flex就搞定了，那么Flex item又是什么呢，即設(shè)置過(guò)display:flex的html元素它在文檔流中的子元素就是Flex item了。
判斷哪些是有效的Flex item
并不是設(shè)置過(guò)display:flex的html元素它里面的任何元素都是Flex item。而是它的在文檔流中的子元素才是Flex item。兩個(gè)條件，一是在文檔流中，二是子元素。下面我們就來(lái)判斷下哪些是有效的Flex item？
float元素是在文檔流中的子元素，因此算Flex item，absolute絕對(duì)定位的元素是脫離文檔流的，不能算，至于最后一個(gè)是孫元素，也不能算。
彈性布局的特性
接下來(lái)我們來(lái)講講彈性布局的特性，從三個(gè)方面來(lái)講，分別是排列方向、彈性、對(duì)齊。
排列方向
排列方向有關(guān)的屬性有這些：flex-direction（彈性的方向）、flex-wrap（彈性的換行）、flex-flow（flex-direction 和 flex-wrap 屬性的復(fù)合屬性）、order（順序）。下面分別來(lái)介紹下。
（1）首先我們來(lái)看一下flex-direction（彈性的方向），它的語(yǔ)法如下：
flex-direction:row|row-reverse|column|column-reverse;
flex-direction是設(shè)置彈性布局的方向，默認(rèn)是row。
（2）接下來(lái)我們來(lái)看一下flex-wrap（彈性的換行），它的語(yǔ)法如下：
flex-wrap:nowrap|wrap|wrap-reverse;
flex-wrap是設(shè)置彈性布局的換行，默認(rèn)是nowrap，即不換行。
（3）接下來(lái)我們來(lái)看一下flex-flow，它是flex-direction 和 flex-wrap 屬性的復(fù)合屬性，它的語(yǔ)法如下：
flex-flow:flex-direction||flex-wrap;
默認(rèn)是row nowrap，即橫方向排列且不換行。
使用時(shí)建議使用復(fù)合屬性flex-flow，非單獨(dú)屬性flex-direction 和 flex-wrap。
（4）再來(lái)看一下order（順序），默認(rèn)值為0。它的語(yǔ)法如下：
order:number;
order:1的元素大于order：0的另兩個(gè)元素，于是順序就調(diào)換了。order的值為整數(shù)，可負(fù)數(shù)。
彈性
彈性有關(guān)的屬性有這些：flex-basis（設(shè)置flex-item的初始寬高）、flex-grow、flex-shrink。下面分別來(lái)介紹下。
（1）首先我們來(lái)看一下flex-basis（設(shè)置flex-item的初始寬高），它也會(huì)作為以后設(shè)置彈性的基礎(chǔ)，它的語(yǔ)法：
flex-basis: number|auto|initial（默認(rèn)）|inherit;
這里要提一下，如果設(shè)置默認(rèn)值的話，若該彈性元素是橫向排列的，即為主軸main axis的寬度，若是縱向排列的，即為輔軸cross axis，也就是高度了。
（2）接下來(lái)我們來(lái)看一下flex-grow，該屬性用于設(shè)置彈性盒的能分配到的剩余空間的擴(kuò)展比率。如果元素不是彈性盒對(duì)象的元素，則 flex-grow 屬性不起作用。默認(rèn)值是0，它的語(yǔ)法：
flex-grow: number;
（3）接下來(lái)我們來(lái)看一下flex-shrink，它是設(shè)置彈性元素的能分配到的剩余空間的收縮比例，默認(rèn)值是1，它的語(yǔ)法：
flex-shrink: number;
(4)接下來(lái)我們來(lái)講講flex這個(gè)復(fù)合屬性，它的語(yǔ)法：
flex: flex-grow||flex-shrink||flex-basis;
使用時(shí)建議使用復(fù)合屬性flex。
對(duì)齊
對(duì)齊有關(guān)的屬性有這些：justify-content(設(shè)置主軸方向的對(duì)齊方式)、align-items(設(shè)置輔軸方向的對(duì)齊方式)、align-self、align-content。下面分別來(lái)介紹下。
（1）首先我們來(lái)看一下justify-content(設(shè)置主軸main-axis方向的對(duì)齊方式)，它的語(yǔ)法：
justify-content: flex-start|flex-end|center|space-between|space-around;
（2）接下來(lái)我們來(lái)看一下align-items(設(shè)置輔軸cross-axis方向的對(duì)齊方式)，它的語(yǔ)法：
align-items: flex-start|flex-end|center|baseline|stretch;
看的清楚么？看不清楚我們?cè)贀Q一張效果圖：
（3）接下來(lái)我們來(lái)看一下align-self（設(shè)置單個(gè)flex item在cross-axis方向上的對(duì)齊方式），它的語(yǔ)法：
align-self: auto|flex-start|flex-end|center|baseline|stretch;
這個(gè)跟align-items差不多，所以效果圖就不放了。
（4）接下來(lái)我們來(lái)看一下align-content（設(shè)置cross-axis方向上行的對(duì)齊方式），它的語(yǔ)法：
align-content: auto|flex-start|flex-end|center|space-between|space-around|stretch;
align-content是當(dāng)出現(xiàn)多行時(shí)，多行如何對(duì)齊，可以看到上圖有三行，圖中顯示就是三行的分別對(duì)齊方式。
總之：flex彈性布局的基礎(chǔ)知識(shí)講完了，以后有空會(huì)補(bǔ)充實(shí)例篇。
