September 6, 2021

[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 會在系列中提及,會順便講一點,不會著墨太多。


目錄

  1. Flexbox 基本介紹
  2. Flexbox 能與不能
  3. Flexbox 與 Media Query
  4. Flexbox 其他相關資訊
  5. Grid 基本介紹
  6. Grid 能與不能
  7. Grid 與 Media Query
  8. Grid 演算機制
  9. Grid 與 Flexbox 比較
  10. Grid / Flexbox 混合應用
  11. Grid 進階與新功能
  12. Grid 在瀏覽器上的各種差異
  13. 那些跟 Grid 相關的 CSS 樣式設定
  14. 那些關於 Level 2 的事情

以上這些,其實就把超長篇幅的文章然後分割成 30 份這樣吧(哈)。


小記

其實我之前寫過 Grid,去 Google 就有了(欸)。