Flexbox 解決了過去使用 float, table, inline-block 等延伸的複雜佈局而產生的問題。而之後 CSS Grid 的誕生則是專門為了解決 layout 問題而開發的 CSS module。兩者之間到底是來互相取代,還是一起相輔相成?姑且分別用這兩種系統來實作同一個簡單的 layout 看看!
有別於 one-dimensional 的 flexbox,CSS Grid 是 two-dimensional 的 layout system, CSS Grid 又稱 Grid (以下文章內容亦用此稱),是第一個專門為了解決 layout 問題而開發的 CSS module, 為了解決開發時的各種 hack(即便是用 flexbox)。
Flexbox 是 CSS3 新的排版語法(layout model 佈局模式相關)。有鑑於 CSS3 規範日漸普及於各家瀏覽器,再加上行動裝置的篷勃發展促成了 Responsive Web Design(RWD)佈局的興起,相較於之前的佈局模式(比如 block, inline, table, position),自適應性版面彈性極大的 Flexbox,就成為大多數網頁開發人員們的心頭好啦!
去年年中 Dan Abramov 在 React 部落格發表的文章提到,隨著 React codebase 的持續演化,mixins 已經漸漸不符合團隊的期待,正式宣告 ES6 的語法不再支援。以下節錄部分相關段落:
To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those…
之前為了研究 Ruby 內部的運作機制所以做了這投影片,裡面簡單的用圖解描述了在執行 method call 時 Ruby 內部 stack 跟各種 pointer, counter 的變化。(Goby 的 VM 也是用類似概念在實作的)