面試被問到這個問題，覺得這個看過沒問題，結果還是 紙上得來終覺淺 看一遍理解肯定沒有試一試透徹，於是決定記錄一下====================================================================首先是定義彈性盒模型

#wrap{
    display: -webkit-flex;
    display: flex;
}

注意webkit核心必須加-webkit-字首================================================第一個屬性是 flex-direction 是確定主軸的方向     row：主軸方向是水平 從左到右。    column：主軸方向是垂直 從上到下。    row-reverse: 與row相反    column-reverse：  與colunmn相反======================================================
第二個屬性是flex-wrap 有三個值 wrap nowrap wrap-reverse wrap 換行 第二行在下面。nowrap 不換行 wrap-reverse 換行第二行在上面。=================================================================第三個 justify-content屬性 主要是主軸上對齊方式 

• flex-start（預設值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，專案之間的間隔都相等。
• space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

=========================================================第四個屬性：align-items 與 justify-content 屬性相似 是在交叉軸上對其方式

• flex-start
  ：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 專案的第一行文字的基線對齊。
• stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

=======================================================第五個屬性：align-conent 是多個軸線等情況下

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（預設值）：軸線佔滿整個交叉軸。