Recent posts

[CSS] Flex/Grid Layout Modules, part 8

[CSS] Flex/Grid Layout Modules, part 8

我先問一個問題,如果我有一個 3x3 的 Excel 方塊,請問我有幾條格線? Grid 容器中的格線是整個排版定位中的靈魂,但,他沒有 Excel 那麼單純。 網格格線 Grid 容器的靈魂就是網格格線,我們在宣告一個 Grid 容器的時候,每個方塊就會產生相對應的格線,而這些格線當中還會有先前提及的隱性格線(implicit grid)的設計。 我們從 Grid 容器先看起,首先我們定義一個 3x3 的 Grid 容器, .grid-container

[CSS] Flex/Grid Layout Modules, part 7

[CSS] Flex/Grid Layout Modules, part 7

我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意,但,就老話一句,誰在意誰痛苦。 踩到雷而且你還不知道為什麼 新的單位 fr 從 Grid 出現之後,我們有一個新的尺寸單位可以使用,他叫做彈性長度(flexible length),在 CSS 當中,因應這個彈性長度,所以就有了新單位 fr,而 fr 的全名為 彈性軌道(flexible tracks),或者你會聽到有人稱他為 彈性係數(

[CSS] Flex/Grid Layout Modules, part 6

[CSS] Flex/Grid Layout Modules, part 6

你如果會用 Excel,那 Grid 就應該不陌生。 不過老實講,我也不太會用 Excel。 Grid Layout Module 其實他已經 CR 好一陣子了,目前多數主流的 CSS 框架已經開始採用。所以並不是你不會用或是沒有使用到這個東西,而是你已經在用了,但是你不知道他背後是使用 Grid Layout 而已。 caniuse grid layout Level 1Grid 的基本結構就跟我剛剛提到的 Excel 很像,他是一個矩形區塊,包含了欄與列的設定。

[CSS] Flex/Grid Layout Modules, part 5

[CSS] Flex/Grid Layout Modules, part 5

數學不會背叛你,數學不會就是不會。 我現在寫三角函數都是去 Google 的,不要問。注意!本篇可能會出現大量的加減乘除,如有出現頭暈目眩、噁心想吐、手腳冰冷無力等狀況,請立即關閉本篇文章,閃光洽關心您的身體健康。 或者你要去驗孕也是可以的。 容器計算 前幾篇有提到剩餘空間、元件填充等等,我們現在就來看一下實際上 Flex 容器是怎麼做運算的。首先是 flex-grow 的計算方式,在數值總和大於 1 的一般情況下來看,但且記得,必須容器上有存在 剩餘空間 的情況下才能被分配。 Flex 有存在剩餘空間時才能以 flex-grow

[CSS] Flex/Grid Layout Modules, part 4

[CSS] Flex/Grid Layout Modules, part 4

Media Query 已經快被講爛了。 我不確定現在是否還流行 RWD 這件事情,如果以 Core Web Vitals 來看,你可能會被建議減少未使用的 CSS,但是誰在乎誰痛苦。 我最近就挺痛苦的(倒)。 Flexbox 與 Media Query 前面講到了不少關於斷行、多行的問題,當我們準備面臨多裝置、多解析度的時候,這個問題又會浮上台面。畢竟以常用的 flex-direction: row 來說,你的裝置尺寸就直接與你的 Media Query 的斷點,

[CSS] Flex/Grid Layout Modules, part 3

[CSS] Flex/Grid Layout Modules, part 3

結果我真的兩篇就快講完了(驚恐)。 既然是說要講切版的話,還是多少交代一些比較基礎的東西好了。 Flex 的軸流向與留白 之前我們提及了多數 CSS 框架的設計,絕大部分都是 row 的主要軸流向。原因也相對單純,基本上你不太會擁有一個「無限寬度」的裝置,所以在目前主流裝置下,我們的寬度都會存在一個極大值,這個極大值基本上就會是整個 Flex 容器的主要軸尺寸。 所以,我們以雙欄結構來看,最單純的設定就會像是這樣, .flex-container { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: