Flexbox

> 數學不會背叛你，數學不會就是不會。 我現在寫三角函數都是去 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 元件，

> 其實我不知道 Flexbox 還有誰想看？ 這年頭好像用框架比較快，誰理你背後的原理是什麼呢？ -------------------------------------------------------------------------------- Flexbox 我們先來看看可使用狀況。基本上除了 IE 以外，是不用擔心使用上的問題。 CSS Flexible Box Layout ModuleFlexbox 的基本盤是對應從 CSS2.1 以來的四種編排模式， 1. 區塊（block） 2. 行內（inline, inline block） 3. 表格資料（table, 或各種資料集設計）