一，開啟佈局

       程式碼示例：

.input{

display:flex;  // 開啟flex佈局

flex-direction: raw;  // 預設為raw(橫向)，  column 列表顯示為  縱向。

}

二、flex排列

.xxx{
    display:flex;
    flex-wrap: wrap;  // 預設屬性 wrap(排列)圖 3.2-1
                      //   ，nowrap (擁擠排列) 都排列在一行 （圖3.2-2）
    wrap-reverse  排序反轉 （圖 3.2-3）
}
 

 注意： flex-flow : xx ** ; 代替以上兩種（flex-direction 和 flex-wrap）

三、justfiy-content屬性

   示意： 定義了專案在主軸上的對齊方式。

它其中包含了5個屬性值：  flex-start 、flex-end 、 center 、 space-between 、space-around; 

flex-start（預設值）：左對齊

flex-end：右對齊

center： 居中

space-between：兩端對齊，專案之間的間隔都相等。

space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍

未完待續......希望能幫到大家。 記得點贊哦