【主題一：Flexbox】單元：

1. Flexbox基礎
2. 彈性容器（flex container）
3. 排列彈性項目
4. 彈性內容
5. 調整內容
6. 對齊項目
7. align-self屬性
8. align-content
9. 彈性項目
10. 彈性項目相關屬性
11. flex屬性
12. flex-grow屬性
13. flex-shrink屬性
14. flex-basis屬性
15. flex縮寫
16. order屬性

【1-1 Flexbox基礎】重點整理：

• Flexbox是個簡單又強大的排版工具，透過指定頁面上各組成部分佔據的空間、內容的對齊、及視覺上的順序進行排版。
• 內容外觀能與原始碼的順序脫勾（不影響螢幕報讀軟體）。
• Flexbox布局透過將元素宣告display:flex或display:inline-flex啟動，讓元素成為彈性空間（flex container），彈性容器的子代元素就成為彈性項目（flex item）。
• 一旦將原宿舍動為彈性內容，只會將子代設定為彈性元素，不影響後裔元素。
• Flexbox設計本身沒有特定的方向。
• Flexbox是為單一維度分布資訊版型所設計，若要使用二維排版功能，需要使用「網格排版」系統。