一，伸縮佈局的使用

1. main axis：主軸
2. main start：主軸開始位置
3. main end：主軸結束位置
4. main size：主軸空間
5. cross axis：交叉軸
6. cross start：交叉軸開始位置
7. cross end：交叉軸結束位置
8. cross size：交叉軸空間
9. 

• 一般使用：display: flex;
• Webkit 核心的瀏覽器：display: -webkit-flex;

二，父容器的6個特性

1. flex-direction：主軸的方向。

   1.  flex-direction: row;                // 預設值，主軸為水平方向，起點在左端。
   2.   flex-direction: row-reverse;        // 主軸為水平方向，起點在右端。
   3.   flex-direction: column;             // 主軸為垂直方向，起點在上。
   4.   flex-direction: column-reverse;     // 主軸為垂直方向，起點在下。

2. flex-wrap：超出父容器子容器的排列樣式。

   1. flex-wrap: nowrap; // 預設，不換行
   2. flex-wrap: wrap; // 換行，第一行在上方。
   3. flex-wrap: wrap-reverse // 換行，第一行在下方。

3. flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式。

   1. 預設值為 row nowrap
   2. flex-flow: <flex-direction> || <flex-wrap>;

4. justify-content：子容器在主軸的排列方向。

   1. justify-content: flex-start; // 預設，左對齊
   2. justify-content: flex-end; // 右對齊
   3. justify-content: center; // 居中
   4. justify-content: space-between; // 兩端對齊，專案之間的間隔都相等。
   5. justify-content: space-around; // 環繞對齊，每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

5. align-items：子容器在交叉軸的排列方向。側軸沒有兩端對齊和環繞對齊

   1.     align-items: flex-start;    // 交叉軸的起點對齊。
   2.     align-items: flex-end;      // 交叉軸的終點對齊。
   3.     align-items: center;        // 交叉軸的中點對齊。
   4.     align-items: baseline;      // 專案的第一行文字的基線對齊。
   5.     align-items: stretch;       // 預設，如果專案未設定高度或設為auto，將佔滿整個容器的高度。

6. align-content：多根軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用

   1.     align-content: flex-start;   // 與交叉軸的起點對齊
   2.     align-content; flex-end;     // 與交叉軸的終點對齊。
   3.     align-content: center;       // 與交叉軸的中點對齊。
   4.     align-content: space-between;// 與交叉軸兩端對齊，軸線之間的間隔平均分佈。
   5.     align-content: space-around; // 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
   6.     align-content: stretch;     // 預設 軸線佔滿整個交叉軸。

三，子容器的6個特性

1. order：子容器的排列順序

   1. order: num;
   2. 定義專案的排列順序。數值越小，排列越靠前，預設為 0

2. flex-grow：子容器剩餘空間的拉伸比例

   1. flex-grow: <number>; /* default 0 */
   2. 定義子容器的伸縮比例。按照該比例給子容器分配空間

3. flex-shrink：子容器超出空間的壓縮比例

   1. flex-shrink: <number>; /* default 0 */
   2. 定義了子容器彈性收縮的比例
   3. 此屬性要生效，父容器的 flex-wrap 屬性要設定為 nowrap

4. flex-basis：子容器在不伸縮情況下的原始尺寸

   1. flex-basis: <length> | auto; /* default auto */
   2. 定義了子容器在不伸縮情況下的原始尺寸，主軸為橫向時代表寬度，主軸為縱向時代表高度

5. flex：子元素的 flex 屬性是 flex-grow,flex-shrink 和  flex-basis 的簡寫

   1. 是 flex-grow,flex-shrink 和 flex-basis 的簡寫，預設值為 0 1 auto。後兩個屬性可選
   2. 有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)

6. align-self：

   1. 允許單個專案有與其他專案不一樣的對齊方式，可覆蓋父容器 align-items 屬性
   2. 預設值為 auto，表示繼承父元素的 align-items屬性，如果沒有父元素，則等同於 stretch

   3.   align-self: auto;             // 繼承父元素的 align-items 屬性
          align-self: flex-start;       // 交叉軸的起點對齊。
          align-self: flex-end;         // 交叉軸的終點對齊。
          align-self: center;           // 交叉軸的中點對齊。
          align-self: baseline;         // 專案的第一行文字的基線對齊。
          align-self: stretch;          // 預設，如果專案未設定高度或設為auto，將佔滿整個容器的高度。

四，flex佈局的相關注意點

1，換行問題:flex-wrap屬性

1. flex-wrap: nowrap;不換行
2. flex-wrap: wrap;換行，上邊排滿
3. flex-wrap: wrap-reverse;換行，下邊排滿
4. 如果伸縮容器的高度比換行之後所有伸縮項的高度還要高, 那麼系統會自動將剩餘空間平分之後新增給每一行

2，換行對齊問題