技術 [CSS] Flex/Grid Layout Modules, part 1

萬事起頭難，只要不起頭，就一點都不難了。 在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁股的我只能在沙灘上曬乾，而且還...

技術 [CSS] Flex/Grid Layout Modules, part 15

燙傷了手停了幾天，不過差不多 15 天好像就交代完所有的東西了。剩下的大部分是比較冷門，甚至是 Grid Layout Module Level 2 的事情，雖...

技術 [CSS] Flex/Grid Layout Modules, part 16

Media Query 我覺得已經講到快爛掉了，搭配 Grid 說實在話也沒有很不好做的地方。不過，由於 Grid 是「方格系統」，所以你必須要撇開之前使用 F...

技術 [CSS] Flex/Grid Layout Modules, part 7

我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意，但，就老話一句，誰在意誰痛苦。 踩到雷而且你還不知道為什...

技術 [CSS] Flex/Grid Layout Modules, part 2

本篇會有不少冷門範例。 其實我覺得很奇妙，就是我老是踩到一些超冷門連 Google 都找不太到的雷。 Flexbox 能與不能 首先還是得叮嚀一下，如果使...

技術 [CSS] Flex/Grid Layout Modules, part 4

Media Query 已經快被講爛了。 我不確定現在是否還流行 RWD 這件事情，如果以 Core Web Vitals 來看，你可能會被建議減少未使用的...

技術 [CSS] Flex/Grid Layout Modules, part 5

數學不會背叛你，數學不會就是不會。 我現在寫三角函數都是去 Google 的，不要問。注意！本篇可能會出現大量的加減乘除，如有出現頭暈目眩、噁心想吐、手腳冰...

技術 [CSS] Flex/Grid Layout Modules, part 9

你以為網格格線告一個段落後，我會開始講網格單元嗎？當然不是啊，我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。 放心雷沒有很多。 容器中的隱性軌...

技術 [CSS] Flex/Grid Layout Modules, part 12

今天繼續來講 Grid 單元，昨天提到了對齊基本用法，今天繼續來講對齊與留白。不過一開始，還是先解釋清楚關於格線與單元之間的事情。 總覺得 15 天就會結束了說...

技術 [CSS] Flex/Grid Layout Modules, part 3

結果我真的兩篇就快講完了（驚恐）。 既然是說要講切版的話，還是多少交代一些比較基礎的東西好了。 Flex 的軸流向與留白 之前我們提及了多數 CSS 框架的...

技術 [CSS] Flex/Grid Layout Modules, part 6

你如果會用 Excel，那 Grid 就應該不陌生。 不過老實講，我也不太會用 Excel。 Grid Layout Module 其實他已經 CR 好一...

技術 [CSS] Flex/Grid Layout Modules, part 10

來到了 30 天的三分之一，然後我才剛講完網格容器而已，但是，剩下的東西也不多了，好像要寫滿 30 篇難度有點高。 只好多寫一點廢話了。 間隔、間隔、間隔...

技術 [CSS] Flex/Grid Layout Modules, part 8

我先問一個問題，如果我有一個 3x3 的 Excel 方塊，請問我有幾條格線？ Grid 容器中的格線是整個排版定位中的靈魂，但，他沒有 Excel 那麼單...

技術 [CSS] Flex/Grid Layout Modules, part 11

現在終於可以開始講 Grid 單元的事情了，雖然可以講的事情可能不多，絕大部分會圍繞在造成容器影響的地方，當然基本的東西還是會先帶一下。 只是說講完之後到底能不...

技術 [CSS] Flex/Grid Layout Modules, part 13

單元對齊跟留白的部分今天會繼續，定位的問題基本上不出亂子的話就如同昨天說明的。當然，如果再加上對齊跟留白，如果不小心也是會爆炸的。 對於留白問題，我一律設定為...

技術 [CSS] Flex/Grid Layout Modules, part 14

中秋連假寫稿好像有點不太應景，所以今天不會講太多東西，最後把 Grid 單元的對齊稍微補一下，連假嘛，大家輕鬆一點。 不過武漢肺炎肆虐，大家還是小心為上。 單...