Flex佈局官方稱為CSS Flexble Box佈局模型是CSS3為了提高元素在容器中的對齊、方向、順序，甚至它們是動態的或者不確定大小的新佈局模型。Flex容器的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間 。

很多的設計師和開發者發現Flex佈局很容易使用，它定位元素簡單因此很多複雜的佈局能夠用很少的程式碼實現，引領更簡單的開發過程。Flex佈局的演算法是基於方向的，不同於基於水平或者垂直的block和inline佈局，這種Flex佈局可以被用在小的應用元件中，而CSS3 網格佈局模型是新興處理大規模的佈局。

本文主要講解flex的每個屬性怎樣栩栩如生的影響佈局。

1、基本概念:

在開始描述Flexbox屬性之前，我們先小小的介紹一下Flexbox模型，Flex佈局由父容器稱為Flex容器（flex-container）和它直接的子元素稱為flex 專案（flex-item）構成，在下文中將它們簡稱為“容器”和“專案”。

在上圖中你可以看到用來描述Flex容器和它的子元素的屬性和術語，你可以閱讀來了解他們的意思。

• flex容器有兩個參考的軸：水平的主軸（main axis）和交叉的軸（cross axis）。
• 主軸的開始位置main start，主軸結束位置main end；
• 交叉軸的開始位置叫做cross start，結束位置叫做cross end；
• 直接子元素“專案”沿主軸排列；
• 單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

Flexbox是2009年W3C提出的新佈局方案，這裡用的是2014年9月的最新標準，它的最新的瀏覽器支援情況

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

2、用法:

使用flex佈局首先在HTML中的父元素上設定display屬性：

.flex-container {
    display: -webkit-flex; /* Safari */
    display: flex;
}
 

或者你想讓它像內聯元素一樣，可以這樣寫：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注意：這是唯一的要設定在父容器上的屬性，所有的直接子元素會成為自動flex專案。

3、flexbox 容器的屬性：

flex-direction:row(預設值) | row-reverse | column | column-reverse;

該屬性指定了Flex的專案怎樣在flex容器中排列，設定flex容器的主軸方向，它們(專案)兩個主要的方向排列，就像一行一樣水平排列或者像一列一樣垂直排列。

values：

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}

row 方向表明flex專案在一行中從左到右堆放在容器中。

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}

row-reverse 方向表明flex專案從右到左堆放。

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}

column 方向指明flex專案在一列中從頂部到底部堆放

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

column-reverse 方向指明flex專案在一列中從底到頂部堆放

 flex-wrap:nowrap(預設值) | wrap | wrap-reverse;

初始情況下，Flexbox的理念是所有的專案都排列在一條線上（軸線），flex-wrap 屬性控制容器是否將它的專案排列在一行或者多行，並且控制新行堆疊的方向。

values：

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
}

flex專案會排列在一條線上並且它們會縮放適應到容器的寬。

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

專案(flex items)會在多行展示，如果需要的話它們可以從左到右或者從上到下排列。

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap:         wrap-reverse;
}

 flex-flow: <flex-direction> || <flex-wrap>;

該屬性是上面兩個屬性的簡寫方式，前一個引數設定flex-direction，後一個引數設定flex-wrap;

values：

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

預設值： row nowarp

 justify-content:flex-start(預設值) | flex-end | center | space-between | space-around;

定義了專案在容器主軸上的對齊方式，當的容器中專案都是一行並且非彈性的時候或者專案是彈性的但是達到了它們的最小寬度的時候該屬性可以定義容器中的剩餘空間的分配。

values：

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
          flex-start;
}

所有專案向容器的左邊對齊

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

所有專案向容器的右邊對齊

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

所有專案在容器中居中對齊

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

第一個和最後一個專案向容器的邊界對齊，剩餘的空間各個專案等分

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}

所有的專案等分剩餘的容器空間，包括第一個和最後一個專案（所以專案之間的間隔比第一個和最後一個專案與容器邊框的間隔大一倍）。

 align-items:flex-start | flex-end | center | baseline | stretch(預設值);

定義專案在交叉軸上的對齊方式，交叉軸與當前的軸線有關係，與justify-content很相似，只不過是垂直方向的；這屬性為所有的專案設定預設的交叉軸上的對齊方式，包括匿名的。

values：

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}

專案會填充容器的整個高或者寬(fill the whole height )，從容器交叉軸的起點到交叉軸的結束點。

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}

專案會堆放在容器交叉軸的起始位置（cross start ）。

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items:         flex-end;
}

專案會堆放在容器交叉軸的結束位置（cross end ）。

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}

專案會堆放在容器交叉軸的居中位置（ center of the cross axis ）

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items:         baseline;
}

所有專案的基線會對齊

基線？不知道基線是什麼請戳這裡-->基線是什麼?

 align-content:flex-start | flex-end | center | space-between | space-around | stretch(預設值);

當交叉軸上還有多餘的空間時它定了多行的對齊方式，類似justify-content在主軸上對齊所有專案的方式一樣。

values：

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}

每一行的專案後面等比分配了交叉軸上的多餘空間。

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}

專案在容器的交叉軸起始點上堆放在一起。

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}

專案在容器的交叉軸結束點上堆放在一起。

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}

專案的行被堆放在容器的交叉軸線中間。

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}

與justify-content類似，專案的行距離在容器的交叉軸線上被等分，第一行和末尾的一行與容器的邊緣對齊。

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}

與justify-content類似，專案的行等分了容器的交叉線上的剩餘空間，第一行和最後一行同樣也得到了一些，它們之間的間隔比首行和末行到容器邊界的間隔大一倍。

注意：這個屬性僅僅當容器中有多行的專案時有效，如果所有專案僅僅佔一行，那這個屬性對佈局沒有任何影響。

4、Flexbox 專案屬性

<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></span>

order屬性控制容器的直接子元素在容器中的順序，預設在容器中這些專案是以該數字遞增的方式排列的。

values:

values:
.flex-item {
  -webkit-order: <integer>; /* Safari */
  order:         <integer>;
}

該屬性可以很簡單的控制專案的順序，而不用在HTML程式碼裡面做調整。這個整形值可以為負數，預設值是 0。

<span style="font-size:14px;">flex-grow: <number></span>

該屬性指定專案的生長因素，它確定了當容器有剩餘空間分配的時候相對於其他的專案當前的專案能夠增加多少寬度。
values:

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

當所有的專案的flex-grow值相等的時候它們的size相同。

第二個專案佔用了更多的剩餘空間。

預設值是：0
注意：負數在這個屬性中是沒有用的

flex-shrink: <number>

該屬性指定了專案的收縮因素，它確定了當容器還有剩餘空間收縮的時候該專案相對於其他專案的收縮多少。

values:

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}

預設情況下，所有的專案都會收縮，但是當我們設定該屬性的值為0的時候，專案會保持原有的大小。


預設值是：1
注意：負數在這個屬性中是沒有用的

flex-basis：auto | <width>

該屬性的值和width和height的取值一樣，在 flex factors分配剩餘空間之前指定專案的初始的大小。

values:

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

預設值：auto

flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

該屬性是flex-grow, flex-shrink 和flex-basis的縮寫形式，同時屬性值也有簡寫：auto表示(1,1,auto)，none表示(0,0,auto)

values:

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

注意： W3C鼓勵使用flex的簡寫形式，因為flex在使用過程中會順便初正確的重新設定沒有確定的元件到常見用法。

align-self:auto | flex-start | flex-end | center | baseline | stretch;

該屬性和容器的align-items屬性有同樣的作用，它是用在單一的專案上的，可以完全壓倒容器中align-items定義的對齊方式。
values:

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self:         auto | flex-start | flex-end | center | baseline | stretch;
}

注意：auto 表示專案會使用父元素（容器）的align-items的值，如果該專案沒有父元素的話align-self的值是stretch。

flex items值得注意的是：float、clear、vertical-align這些屬性對於專案(flex item)會失效。