一、container 容器（容器內的元素簡稱為’專案’）

1、設定容器的屬性display:flex

- flex-direction : row(預設值)

• row: 主軸橫向，從左向右。
• row-reverse: row的反方向。
• column: 主軸縱向，方向從上指向下。
• column-reverse: column的反方向。

- flex-wrap屬性（設定是否允許專案多行排列，以及排列時換行的方向）

• nowrap 不換行
• wrap 換行排列
• wrap-reverse: wrap的反方向

- justify-content

屬性（設定專案在主軸方向上對齊方式，以及分配專案之間及周圍多餘的空間）

• flex-start(預設值): 專案對齊主軸起點，專案間不留空隙。
• center: 專案在主軸上居中排列，專案間不留空隙。
• flex-end: 專案對齊主軸終點，專案間不留空隙。
• space-between: 專案間距相等，第一個專案離主軸起點和最後一個專案離主軸終點距離為0.
• space-around: 與space-between相似，不同點是，第一個專案離主軸起點和最後一個專案離主軸終點距離為中間專案間間距的一半。
• space-evenly: 專案間間距、第一個專案離主軸起點和最後一個專案離主軸終點距離等於專案間間距。

- align-items屬性（設定專案在行中的對齊方式）

• stretch(預設值) ：專案拉伸至填滿行高。
• flex-start: 專案頂部與行起點對齊。
• center: 專案在行中居中對齊。
• flex-end: 專案底部與行終點對齊。
• baseline: 專案與行的基線對齊。

- align-content屬性（多行排列時，設定行在交叉軸方向上的對齊方式，以及分配行及其周圍多餘的空間。）

• stretch(預設值): 當未設定專案尺寸，將各行中的專案拉伸至填滿˙交叉軸。當設定了專案尺寸，專案尺寸不變，專案行拉伸至填滿交叉軸。
• center: 行在交叉軸中點排列，行間不留間距，首行離交叉軸起點和尾行離交叉軸終點距離相等。
• flex-end: 尾行在交叉軸終點開始排列，行間不留間距。
• space-between: 行與行間距相等，首行離交叉軸起點和尾行離交叉軸終點的距離為0.
• space-around: 行間距相等，首行離交叉軸起點和尾行離交叉軸終點距離為行與行間距的一半。
• space-evenly: 行間距、以及首行離交叉軸起點和尾行離交叉軸終點距離相等。

二、 item專案屬性 （設定專案，用於設定專案的尺寸，位置，以及對專案的對齊方式做特殊設定）

• order屬性 — 設定專案沿主軸方向上的排列順序，數值越小，排列越靠前。屬性值為整數。
• flex-shrink屬性 —- 當專案在主軸方向上溢位時，通過設定專案收縮專案適應容器。屬性值為專案的收縮因子，屬性值取非負數。未設定該值則預設為1.
  ****需要注意的是，當專案的壓縮因子相加小於1時，參與計算的溢位空間不等於完整的溢位空間。
• flex-grow屬性 —— 當專案在主軸方向還有剩餘空間時，通過設定專案擴張因子進行剩餘空間的分配。屬性值為專案的擴張因子，屬性值取非負數。
• flex-basis屬性 —-當容器設定flex-direction為row或row-reverse時，flex-basis和width同時存在，flex-basis優先順序高於width,也就是此時flex-basis代替專案的width屬性。
  ****需注意：當flex-basis和width(或height)其中一個屬性值為auto時，非auto的優先順序跟高。
• flex屬性—-是flex-grow, flex-shrink, flex-basis的簡寫方式。值設定為none,等價於 00 auto,值 為auto,等價於 1 1 auto.
• align-self 屬性 —- 設定專案在行中交叉軸方向上的對齊方式，用於覆蓋容器的align-items，這麼做可以對專案的對齊方式做特殊處理。預設值auto. 繼承容器的align-items值，當容器沒有設定align-items時，屬性值為stretch.