一、彈性布局的優缺點
優點：
- 代碼簡潔易懂，使用方面；
- 在移動端開發中最為廣泛，操作方面，布局簡單；
- 很大程度上替代了傳統的復雜布局，不用一個像素一個像素地調；
- 能讓頁面布局快速達到自己想要的效果。
缺點：
- PC 端瀏覽器兼容性比較差，版本低一點的瀏覽器可能實現不了自己想要的布局效果；
- 為父盒子設置 flex 布局后，子元素的 float、clear 和 vertical-align 屬性將失效。
二、關於flex
1、什么是flex：flex 是 Flexible Box 的縮寫，意為”彈性布局”。
2、flex的作用：flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。
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 屬性：設置或檢索彈性盒模型對象的子元素出現的順序。
| 值 | 描述 |
|---|---|
| number | 默認值是 0。規定靈活項目的順序。 |
| initial | 設置該屬性為它的默認值。 |
| inherit | 從父元素繼承該屬性。 |
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 屬性的簡寫屬性
| 值 | 描述 | 作用 |
| auto | 與 1 1 auto 相同。 | 等分放大縮小 |
| none | 與 0 0 auto 相同。 | 不放大，但等分縮小 |