一、彈性佈局的優缺點

優點：

• 程式碼簡潔易懂，使用方面；
• 很大程度上替代了 float 、position的複雜佈局，特別是元素的水平和垂直居中，不用一個畫素一個畫素地調；
• 是頁面佈局快速達到自己想要的效果。

缺點：

• 瀏覽器相容性比較差，版本低一點的瀏覽器可能實現不了自己想要的佈局效果。

二、關於flex

1. 什麼是flex：flex 是 Flexible Box 的縮寫，意為”彈性佈局”。
2. flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
3. flex的作用：flex 屬性用於設定或檢索彈性盒模型物件的子元素如何分配空間。

三、如何使用flex

1. 使用flex佈局只需要在最外層容器設定 display:flex;（將容器中的塊級元素轉變為行內元素） 即可。
2. 我們可以將整個網頁看成一個flex容器。
3. 採用flex佈局稱為flex容器，所有子容器自動生成容器成員稱為flex專案。

四、容器屬性

1.  justify-content 屬性：用於設定或檢索彈性盒子元素在主軸（橫軸，X軸）方向上的對齊方式。

(1)justify-content: flex-start; /* 預設值，從行首起始位置開始排列 */
(2)justify-content: center;     /* 元素沿橫軸居中排列 */
(3)justify-content: flex-end;   /* 元素沿橫軸從行尾位置開始排列 */
(4)justify-content: space-between;  /* 均勻排列每個元素，首個元素放置於起點，末尾元素放置於終點 */
(5)justify-content: space-around;  /* 均勻排列每個元素，每個元素周圍分配相同的空間 */
(6)justify-content: space-evenly;  /* 均勻排列每個元素，每個元素之間的間隔相等 */
(7)justify-content: stretch;       /* 均勻排列每個元素， 'auto'-sized 的元素會被拉伸以適應容器的大小 */
(8)/* 溢位對齊方式 */
    justify-content: safe center;
    justify-content: unsafe center;
 

2. align-items 屬性:定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

(1)align-items:stretch;    /*預設值,元素被拉伸以適應容器。*/
(2)align-items:center;    /*元素位於容器縱軸的中心,彈性盒子元素在該行的縱軸上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。*/
(3)align-items:flex-start;     /*元素位於容器縱軸的開始位置。*/
(4)align-items:flex-end;    /*元素位於容器縱軸的結束位置。*/

/*小提示*/
/*同時使用 align-items:center; 和 justify-content: center;  能很好地實現元素水平和垂直居中，這也是專案中經常見的*/
 

3. flex-direction 屬性：規定靈活專案的方向。

(1)flex-direction:row;    /*預設值,靈活的專案將水平顯示，正如一個行一樣。*/
(2)flex-direction:row-reverse;    /*與 row 相同，但是以相反的順序。*/
(3)flex-direction:column;    /*靈活的專案將垂直顯示，正如一個列一樣。*/
(4)flex-direction:column-reverse;    /*與 column 相同，但是以相反的順序。*/

4. flex-wrap 屬性:規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

(1)flex-wrap:nowrap;    /*預設值,規定靈活的專案不拆行或不拆列,同時等分容器寬度。*/
(2)flex-wrap:wrap;    /*規定靈活的專案在必要的時候拆行或拆列。*/
(3)flex-wrap:wrap-reverse;    /*規定靈活的專案在必要的時候拆行或拆列，但是以相反的順序。*/

/*擴充套件*/
/*flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性。*/

五、專案（元素）屬性

1. order 屬性：設定或檢索彈性盒模型物件的子元素出現的順序。

2. flex-grow 屬性：設定或檢索彈性盒子的擴充套件比率（用於決定元素在有剩餘空間的情況下是否擴大佔滿剩餘空間）。

//取值：預設為 0 ，即不放大使用預設的自身寬度；
//取值為 1 時，將會放棄自身的寬度而佔滿容器剩餘的空間，若有多個元素取值為 1 ，則平均分配容器剩餘空間。

3. flex-shrink 屬性：指定了 flex 元素的收縮規則。flex 元素僅在預設寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值（用於決定容器空間不足時，是否縮放元素）。

//取值：預設值為 1 ，即容器空間不足時，元素也不縮放
//取值：值為 0 ，即容器空間不足時，元素放棄自身原有的寬度，進行縮放以自適應容器

4. flex-basis 屬性：設定或檢索彈性盒伸縮基準值。（用於設定專案寬度）

//取值：預設 auto ，專案保持預設的寬度，或以width為自身的寬度
//取了有效值後，權重是最高的，會覆蓋預設的或width的寬度

要點：flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性