> 結果我真的兩篇就快講完了（驚恐）。
既然是說要講切版的話，還是多少交代一些比較基礎的東西好了。
Flex 的軸流向與留白
之前我們提及了多數 CSS 框架的設計，絕大部分都是 row
的主要軸流向。原因也相對單純，基本上你不太會擁有一個「無限寬度」的裝置，所以在目前主流裝置下，我們的寬度都會存在一個極大值，這個極大值基本上就會是整個 Flex
容器的主要軸尺寸。
所以，我們以雙欄結構來看，最單純的設定就會像是這樣，
.flex-container {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content:
> 本篇會有不少冷門範例。
其實我覺得很奇妙，就是我老是踩到一些超冷門連 Google 都找不太到的雷。
--------------------------------------------------------------------------------
Flexbox 能與不能
首先還是得叮嚀一下，如果使用靜態定位樣式，會打破 Flex 容器軸流向，所以請不要覺得用了 position: absolute, position:
static, position: fixed 或 position: sticky 的時候來問為何 Flexbox 沒有效果。
--------------------------------------------------------------------------------
尺寸
無論是 Flex 容器或是 Flex 元件，
> 其實我不知道 Flexbox 還有誰想看？
這年頭好像用框架比較快，誰理你背後的原理是什麼呢？
--------------------------------------------------------------------------------
Flexbox
我們先來看看可使用狀況。基本上除了 IE 以外，是不用擔心使用上的問題。
CSS Flexible Box Layout ModuleFlexbox 的基本盤是對應從 CSS2.1 以來的四種編排模式，
1. 區塊（block）
2. 行內（inline, inline block）
3. 表格資料（table, 或各種資料集設計）
> 萬事起頭難，只要不起頭，就一點都不難了。
在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁股的我只能在沙灘上曬乾，而且還賣不到錢。
鐵人賽就當作自己還有在喘氣的證明。
--------------------------------------------------------------------------------
前言
其實寫 CSS 框架應該比較多觀眾，但就一個碼農來說，自己動手做會比較有趣一點。而且那些框架實在有點五花八門，就是你去 Google
一些關鍵字，諸如「超好用」「XX 天就上手」「20XX 熱門框架」然後就會跑出一堆。
> 我沒有阻止你用，只要能賺錢的框架就是好框架。
君不見
受到疫情影響，絕大部分的時間不是在公司就是在家裡，每個禮拜出門採買一次。其實也不是說我不喜歡用線上購物，只是目前其實物流業也是相當緊繃。出門自己小心避開人潮，萬事小心謹慎點就好了。
至於避開人潮這件事情，我都平常日早上 8 點多去大潤發，大概可以避開八九成的人流。
--------------------------------------------------------------------------------
I'm watching you
在 Vue3.x 之後呢，除了原有的 watch 之外，另外提供了一個叫做 watchEffect 的方法。前者跟 Vue2.x 的區別在於，在 3.x
![[CSS] Flex/Grid Layout Modules, part 3](/content/images/size/w960/2021/09/flex-sample-18.png)
![[CSS] Flex/Grid Layout Modules, part 2](/content/images/size/w960/2021/09/flex-sample-9.png)
![[CSS] Flex/Grid Layout Modules, part 1](/content/images/size/w960/2021/09/flexbox-caniuse-1.png)