Flex Box：是一個 (Box model)，是指一個彈性的盒子 ( Flexible Box )，可以適應不同尺寸和設備，因為響應式網頁的興起，愈來愈普及

軸線的概念

• 主軸 (main axis)：左至右 (橫)
• 交錯軸 (cross axis)：上至下 (直)

相關屬性

• 外容器 (Container)
  • display：必備屬性
  • flex-flow
  • flex-direction：決定 flex 軸線
  • flex-wrap：決定換行的屬性
  • justify-content：主要軸線的對齊
  • align-items：交錯軸線的對齊
• 內元件 (items)
  • flex
    • flex-grow：伸展比
    • flex-shrink：收縮比
    • flex-basis：絕對值
  • order：排序
  • align-self：單一物件的交錯軸對齊
• 對齊方法
  可以置中、對齊、平均分配
  如果有用過簡報 (PPT) 上面的排版功能，呈現的效果會類似

VS Code 套件

即時顯示修改效果，方便確認

• Preview on Web Server ：參考說明網址，右鍵選擇開啟 HTML
• Live Server：參考說明網址，右鍵或是右下選擇開啟 HTML