一、Flex 佈局是什麼？
1、Flex佈局是W3C於2009年提出的一種彈性佈局，可簡便、完整、響應式地實現各種頁面佈局。現在市場上的所有瀏覽器都支持Flex佈局。
2、Flex是flexible box的縮寫，是“彈性佈局”，用來爲盒狀模型提供最大的靈活性。
3、任何一個容器都可指定爲Flex佈局
div{ display:flex;}
行內元素也可以使用flex佈局
div{display:inline-flex;}
webkit內核的瀏覽器，必須加上-webkit前綴
div{display:-webkit-flex; /*Safari*/ display:flex;}
4、設爲flex佈局後，子元素設置的float 、clear、vertical-align屬性將失效。
二、Flex 基本概念
採用flex佈局的元素，稱爲flex容器，簡稱爲“容器”。他的所有子元素自動成爲容器的成員，成爲flex項目（flex item），簡稱“項目”。
Flex容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
主軸的開始位置（與邊框的交叉點）叫做main start，主軸的結束位置叫做main end；
交叉軸的開始位置叫做cross start，交叉軸的結束位置叫做cross end。
默認沿着主軸排列，單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
三、Flex容器的屬性
1、flex-direction 屬性表示容器內元素的排列方向（默認爲橫向排列）
flex-direction:row; 沿水平(主軸)方向從左到右
flex-direction:row-reverse; 沿水平(主軸)方向從右向左
flex-direction:column； 沿垂直(交叉軸)方向從上向下
flex-direction:column-reverse; 沿垂直(交叉軸)方向從下向上
2、flex-wrap屬性表示容器內元素的換行/拆行與否（默認不換行）；在支持它的瀏覽器下需要加上前綴，如-webkit、-ms、-moz.
flex-wrap:nowrap; 默認值，不換行或不拆列
flex-wrap:wrap; 可以拆行或拆列（第一個行在上方）
flex-wrap:wrap-reverse; 拆行或拆列，以相反的順序進行拆行或拆列（第一行在下方）
flex-wrap:initial; 設置該屬性爲它的默認值
flex-wrap:inherit; 從父元素繼承該屬性
3、flex-flow屬性是flex-direction和flex-wrap屬性的複合屬性；在支持它的瀏覽器下需要加上前綴，如-webkit、-ms、-moz.該屬性可以用於設置或檢索彈性盒模型對象的子元素排列方式。如果元素不是彈性盒對象的元素，則flex-flow元素將不會起作用。
flex-flow:<flex-direction>\\< flex-wrap>;
flex-flow:row nowrap; 默認值，沿水平主軸方向從左向右排列 不換行不換列；
flex-flow:initial; 設置該屬性爲它的默認值；
flex-flow:inherit; 從父元素繼承該屬性。
4、flex-grow屬性用於設置或檢索彈性盒子的擴展比率，如果元素不是彈性盒對象的元素，則 flex-grow 屬性不起作用。在支持它的瀏覽器下需要加上前綴，如-webkit、-ms、-moz.默認值爲0。
實例：讓第二個元素的寬度爲其他元素的三倍：
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
語法：flex-grow: number|initial|inherit; （number爲一個數字，規定項目將相對於其他靈活的項目進行擴展的量。默認值是 0。）
5、flex-shrink屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值。如果元素不是彈性盒對象的元素，則 flex-shrink 屬性不起作用。在支持它的瀏覽器下需要加上前綴，如-webkit、-ms、-moz.
flex-shrink的默認值爲1，如果沒有顯示定義該屬性，將會自動按照默認值1在所有因子相加之後計算比率來進行空間收縮。
語法：flex-shrink: number|initial|inherit; （number是一個數字，規定項目將相對於其他靈活的項目進行收縮的量。默認值是 1。）
6、flex-basis屬性用於設置或檢索彈性盒伸縮基準值，在支持它的瀏覽器下需要加上前綴，如-webkit、-ms、-moz.如果元素不是彈性盒對象的元素，則 flex-basis 屬性不起作用。默認值爲auto。
實例：設置第二個彈性盒元素的初始長度爲 80 像素：
div:nth-of-type(2) {flex-basis: 80px;}
語法：flex-basis: number|auto|initial|inherit; （number可以是一個長度單位或者一個百分比，規定靈活項目的初始長度。）
7、justify-content屬性定義了項目在主軸上的對齊方式。，
justify-content:flex-start; （默認值）左對齊
justify-content:flex-end; 右對齊
justify-content:center; 居中
justify-content:space-between; 兩端對齊，項目之間的間隔都相等。
justify-content:space-around; 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
5、align-items屬性定義項目在交叉軸上如何對齊。
align-items:flex-start; 交叉軸的起點對齊
align-items:flex-end; 交叉軸的終點對齊。
align-items:center; 交叉軸的中點對齊。
align-items:baseline; 項目的第一行文字的基線對齊。
align-items:stretch; (默認值）如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
6、align-content性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
align-content:flex-start; 與交叉軸的起點對齊。
align-content:flex-end; 與交叉軸的終點對齊。
align-content:center; 與交叉軸的中點對齊。
align-content:space-between; 與交叉軸兩端對齊，軸線之間的間隔平均分佈。
align-content:space-around; 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
align-content:stretch; （默認值）軸線佔滿整個交叉軸。
7、order屬性定義了項目的排列順序。數值越小，排列越靠前，默認爲0。
order:<integer>;
8、align-seft屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
align-seft:auto;
align-seft:flex-start;
align-seft:flex-end;
align-seft:center;
align-seft:baseline;
align-seft:stretch;
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。