[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

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

[CSS] Flex/Grid Layout Modules, part 4

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

[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:

[CSS] Flex/Grid Layout Modules, part 2

> 本篇會有不少冷門範例。 其實我覺得很奇妙,就是我老是踩到一些超冷門連 Google 都找不太到的雷。 -------------------------------------------------------------------------------- Flexbox 能與不能 首先還是得叮嚀一下,如果使用靜態定位樣式,會打破 Flex 容器軸流向,所以請不要覺得用了 position: absolute, position: static, position: fixed 或 position: sticky 的時候來問為何 Flexbox 沒有效果。 -------------------------------------------------------------------------------- 尺寸 無論是 Flex 容器或是 Flex 元件,