Flex

from：https://www.w3.org/TR/css-flexbox-1/#property-index

• 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) 上面的排版功能，呈現的效果很像

另一張圖

from：https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

VS Code 套件

• 即時顯示修改效果，方便確認
  • Preview on Web Server：參考說明網址，右鍵選擇開啟 HTML
  • Live Server：參考說明網址，右鍵或是右下選擇開啟 HTML

參考資料

• 圖解：CSS Flex 屬性一點也不難
• 深入解析 CSS Flexbox
• flexbox

次回

來準備實作 Flex