鐵人賽

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

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

> 結果我真的兩篇就快講完了（驚恐）。 既然是說要講切版的話，還是多少交代一些比較基礎的東西好了。 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 元件，