當一個 div 內包含 多個 div 子物件，因為 div 為 block 塊狀屬性，故預設撐滿整列、並由上往下排列：

.box
    .item 1
    .item 2
    .item 3

透過 Flex 進行彈性排版：

觀念一、父子層：Flexbox & Flex items

1.定義 Flex 物件：display: flex;

• Flexbox：外容器
• Flex items：子物件

此時 flex 相關預設屬性為

.box{
    flex-wrap: no-wrap;
    flex-direction: row;
}

2.分清楚 Flex 屬性對應的是 Flexbox ／ Flex items

定義於 FlexBox (外容器)的

• flex-wrap：其內容物件是否換行？
• flex-direction：其內容物的排列方式為？
• justify-conten：其內容物的主軸向對齊方式
• align-items：其內容物的次軸向對齊方式
• align-content：（針對多行的 Flexbox）其內容物的對其方式
  (flex-wrap:no-wrap時無效)

定義於 FlexItems (子物件) 的

• flex-grow：將該Flexbox的剩餘空間指定給該子物件
• flex-shrink：當所有子物件總寬度超過容器時，該物件是否收縮？
• flex-basis：基準值
• order：指定該子物件排序
• align-self：個別指定該子物件的對齊方式（跳脫原本 flexbox 的設定）

觀念二、資料流向：主軸＆次軸

如上圖排列方式可觀察到，物件為「左至右、上到下」排列。
則這種資料流的排列方式為：

• 主軸 Main axis：物件排列方向
• 次軸 Cross axis：物件換行方向

觀念三、屬性定義－Flexbox

1.單行／多行：flex-wrap

• 子物件超過容器時是否要折行？
• 換行／不換行／換行且反向
• flex-wrap:
  • nowrap
  • wrap
  • wrap-reverse

2.子物件排列方式（資料流向）

flex-direction

• 橫向排(列)／直向排(欄)／橫向排但順序反向／直向排但順序反向
• flex-direction:
  • row
  • row-reverse
  • column
  • column-reverse

３.子物件對齊方式

• 靠起點／靠終點／平均分散…等

justify-content

• 容器內物件主軸對齊方式
• justify-content:
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

align-items

• 容器內物件次軸對齊方式
• align-items:
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

align-content

• 多行時，行間的對齊方式
• flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

觀念四、屬性定義－Flex items

1.子物件對齊方式

align-self

• 個別指定該子物件的對齊方式（跳脫原本 flexbox 的 justify-content 屬性值）

2.子物件伸縮方式

(1)flex-grow

• 有剩餘空間伸展：伸展為1/N等分
• 預設值為 0
  N ＝ 該 flexbox 內的所有子物件的 flex-grow　共有幾等分。
• flex-grow:
  • 1 1/N 個剩餘空間

(2)flex-shrink

• 空間不足時收縮：壓縮比例
• flex-shrink:
  • 0　不壓縮
  • 1　壓縮　(預設值)

(3)flex-basis

• 基準值（預設寬度）
• flex-basis:
  • 100px

三合一縮寫

• flex: flex-grow flex-shrink flex-basis;
• 直接寫 flex: 1 時 = flex-grow: 1

3.自定義子物件順序

order

• 指定子物件排序數值：數字小排到數字大
• flex-order:
  • 2
  • -1

參考資料

• 圖解：CSS Flex 屬性一點也不難|卡斯伯
• 深入解析 CSS Flexbox|OXXO.STUDIO
• FlexBox|MDN
• Flex 空間分配| Lai
• 圖解 Flexbox 進階屬性

個人 Blog: https://eudora.cc/