CSS · Flex & Grid 佈局 · 自檢手冊

寫在前面

本文只列出flex及grid佈局的一些基本概念及新增屬性，用於自檢對相關知識的掌握程度。
具體教程及實例還請參考文末的引用文獻。

Flex佈局

概念

• flex容器 （flex container）
• flex項目 （flex item）

• 主軸 （main axis）

  • 主軸位置 （main start、main end）
  • 主軸空間 （main size）

• 交叉軸 （cross axis）

  • 交叉軸位置 （cross start、cross end）
  • 交叉軸空間 （cross size）

屬性

• 容器屬性

  • flex-direction

    • row
    • row-reverse
    • column
    • column-reverse

  • flex-wrap

    • nowrap
    • wrap
    • wrap-reverse

  • flex-flow

    • 雙參數：flex-direction, flex-wrap

  • justify-content

    • flex-start
    • flex-end
    • center
    • space-between
    • space-around

  • align-items

    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

  • align-content (發生wrap時才生效)

    • flex-start
    • flex-end
    • center
    • stretch
    • space-between
    • space-around

• 項目屬性

  • order

    • 缺省：0

  • flex-grow

    • 缺省：0

  • flex-shrink

    • 缺省：1

  • flex-basis

    • 缺省：auto

  • flex

    • 三參數：flex-grow, flex-shrink, flex-basis

  • align-self

    • auto
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

Tips：

• item的flex三個參數最好寫全，事實上：

  • flex: 0 1 auto ≠ flex: 0 1
    不過常見有寫：flex: 1
    意思是：若存在剩餘空間時，該item填充滿；
    但如果空間已經不夠用了（超出父容器），一樣有：
  • flex: 1 ≠ flex: 1 1 auto
    雖然flex參數2和參數3的缺省值是：1 auto

• item的flex屬性：

  • 缺省值：0 1 auto

    • 參數1：0表明不擴展，非0表明參與比例運算擴展
    • 參數2：0表明不壓縮，非0表明參與比例運算壓縮
    • 參數3：auto表明默認大小，經常使用的還有百分比（相對於父元素）和固定大小；
  • flex-grow：父容器存在剩餘空間時生效；
  • flex-shrink：超出父容器總空間時生效；
  • flex-basis：分配剩餘空間以前的預處理；

Grid佈局

概念

• grid容器
• grid網格線
• grid單元
• grid區域
• grid軌道

屬性

• 容器屬性

  • grid-template-rows
  • grid-template-columns
  • grid-template-ares

• 區域屬性

  • grid-area

參考文獻

• Flex 佈局教程：語法篇
  做者：阮一峯
• Flex 佈局教程：實例篇
  做者：阮一峯
• 採用20/80原則學習 CSS Grid 佈局 (譯)
  做者：一歩