[CSS] Flex/Grid Layout Modules, part 0

萬事起頭難，只要不起頭，就一點都不難了。

在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁股的我只能在沙灘上曬乾，而且還賣不到錢。

鐵人賽就當作自己還有在喘氣的證明。

前言

其實寫 CSS 框架應該比較多觀眾，但就一個碼農來說，自己動手做會比較有趣一點。而且那些框架實在有點五花八門，就是你去 Google 一些關鍵字，諸如「超好用」「XX 天就上手」「20XX 熱門框架」然後就會跑出一堆。

我沒有阻止你用，只要能賺錢的框架就是好框架。

君不見 jQuery 的 $ 還是屹立不搖。

不過 jQuery 有點離題了就是。

目前 w3c 對於 Flexbox, Grid 這兩件事情算是有認真在更新。雖然說 Grid 已經 CR 不過又掛上 Draft，該吵的東西也還沒有結論（例如 subgrid 會推遲到 Level 2 才可能會推出 #Issue958）。

Grid 從 2016 年 CR 至今也 5 個年頭了，基本上在 Caniuse 上面也呈現出不錯的支援度。熱門的 TailwindCSS 基本上也有採用 Grid 來做排版，至於怎麼用不要來問我，我沒有很熟（哈）。

Flexbox 就不用再多說，我在 2012 年看他 CR 後，又到了 2016 才慢慢被推廣出來，算起來已經 9 年了。至於說為什麼那麼不紅（或是不普及？），可能要去問一下前陣子才入土的 IE 吧。

至於所搭配的 Media Query 會在系列中提及，會順便講一點，不會著墨太多。

Flexbox 基本介紹
- [CSS] Flex/Grid Layout Modules, part 1
  - Flexbox
  - 基本介紹
  - Flex 容器
    - 樣式設定
    - 軸方向
  - Flex 元件
    - 樣式設定
    - flex-basis 的魔術
    - align-self
    - order
Flexbox 能與不能
- [CSS] Flex/Grid Layout Modules, part 2
  - 留白與斷行
  - 不如預期的部分
- [CSS] Flex/Grid Layout Modules, part 3
  - Flex 的軸流向與留白
  - Flexbox 巢狀結構
  - 關於對齊
Flexbox 與 Media Query
- [CSS] Flex/Grid Layout Modules, part 4
  - Flexbox 與 Media Query
  - 關於 column 方向
Flexbox 其他相關資訊
- [CSS] Flex/Grid Layout Modules, part 5
  - 容器計算
  - 尺寸干擾
  - 零尺寸元件
  - 關於 gap
Grid 基本介紹
- [CSS] Flex/Grid Layout Modules, part 6
  - Grid 基本介紹
  - Grid 容器
  - 容器尺寸與限制
  - 容器樣式
    - 軌跡清單
    - grid-template-areas 的字串定義
    - 隱性網格
    - 網格單元順序
  - 對齊與間隔
- [CSS] Flex/Grid Layout Modules, part 7
  - 新的單位 fr
  - 容器對齊與定位
- [CSS] Flex/Grid Layout Modules, part 8
  - 網格格線
    - 隱性格線 The Implicit Grid
    - 使用命名格線與隱性格線的雷
- [CSS] Flex/Grid Layout Modules, part 9
  - 容器中的隱性軌道設定
  - 軌道尺寸詳解
    - fit-content(limit)
    - minmax(min, max)
  - 容器單元流向
  - 容器單元的填滿
- [CSS] Flex/Grid Layout Modules, part 10
  - 間隔、間隔、間隔
  - 最後的對齊
- [CSS] Flex/Grid Layout Modules, part 11
  - Grid 單元
  - 尺寸
    - 可替換元件的尺寸
    - 無尺寸限制方向的魔性
  - 對齊的基本操作
- [CSS] Flex/Grid Layout Modules, part 12
  - 單元與格線
  - 指定軌道區域名稱
  - 指定 <軌道格線>
    - <數字> <自訂軌道名稱>
    - span [<數字>, <自訂軌道名稱>]
  - 關於 auto 與 Grid 單元軌道重疊
    - 官方沒有寫的例外
- [CSS] Flex/Grid Layout Modules, part 13
  - 填滿（stretch）與留白（margin）
  - 列方向軌道定位問題
- [CSS] Flex/Grid Layout Modules, part 14
  - 單元的對齊
  - 對齊的權重順序
  - 超出格線
Grid 能與不能
- [CSS] Flex/Grid Layout Modules, part 15
- 例外與注意事項
- 隱性格線的雷
Grid 與 Media Query
- [CSS] Flex/Grid Layout Modules, part 16
Grid 演算機制
Grid 與 Flexbox 比較
Grid / Flexbox 混合應用
Grid 進階與新功能
Grid 在瀏覽器上的各種差異
那些跟 Grid 相關的 CSS 樣式設定
那些關於 Level 2 的事情