在 RWD 響應式網頁的世界裡，不能總是把尺寸寫死，而是要學會讓容器自己依照螢幕寬度來決定大小。今天這篇學習筆記內容整理自官方 Fundamentals 教學中的《Sizing to Fill and Fit Content in Framer》，將帶大家理解兩個超級關鍵的排版屬性：Fill (填滿) 與 Fit Content (適應內容)。
Fill 和 Fit Content 到底是什麼？
如果你用過 Figma ，應該會對這兩種模式很熟悉。在 Framer 中，當我們把物件放入 Stack（類似 Figma 的 Auto Layout）之後，就能解鎖這兩種屬性。
屬性 | 對應 Figma Auto Layout | 意義 |
|---|---|---|
Fill (填滿) | Fill container | 盡可能佔滿剩餘空間 |
Fit Content (適應內容) | Hug contents | 被內容撐開，就像穿緊身衣 |
可以想像是一推一拉：Fill 是向外撐開，Fit Content 是向內收縮。
Fill 與 fr 單位
如果希望內容在網頁，可以自動因應不同螢幕而縮放寬度，那就要使用 Fill 屬性。
當你把一個物件的寬度或高度設為 Fill 時，它會去「偵測父容器」還剩下多少空間，並自動把那些空間填滿。代表你不需要手動設定尺寸，Framer 會幫你自動計算。
FR (Fractional Units) 的數學邏輯
在 Framer 的 Stack 裡，當多個物件都設為 Fill 時，我們會看到一個特別的單位叫做 fr (Fractional Units)，也就是「分數單位」，這是一個超級方便的功能！
邏輯很簡單，想像有一個蛋糕要分給幾個小朋友：
情境一：均分 (1fr vs 1fr vs 1fr) 如果你有三個方塊，都設為 1 fr。 Framer 會把空間切成 3 份 (1 fr + 1 fr + 1 fr)，每個方塊各拿 1/3。
情境二：比例分配 (1fr vs 2fr) 如果你把其中一個方塊改成 2 fr，另外兩個維持 1 fr。 Framer 會把空間切成 4 份 (2 fr + 1 fr + 1 fr )，設為 2 fr 的方塊會拿走 2/4 （也就是 1/2） 的空間，剩下的各占 1/4。
情境三：如果其中一塊指定大小 如果 Stack 裡有一個物件是「固定寬度」(Fixed)，例如 200 px。Framer 會先扣掉這 200 px，剩下的空間才拿來給設為 Fill (fr) 的物件去分配。
Fit Content (適應內容)
當你把容器設為 Fit Content，它的尺寸就會變成「自動」(Auto)。它的寬高取決於「裡面的子物件」有多大。可以想像它是一件有彈性的緊身衣，你塞多少東西進去，它就撐多大；東西拿出來，它就縮回去。
常見 Fit Content 應用場景
按鈕 (Button)： 按鈕的寬度應該隨著文字長短改變，不能寫死。
卡片 (Card) 的高度： 因為網頁垂直空間通常是無限的，我們通常會讓卡片高度設為 Fit，這樣就算文字變多，卡片也會自動長高，不會切到字。
文字框 (Text Box)： 讓文字框的高度隨著換行自動增長。
🚀 快速小技巧： 在 Framer 裡，選取任何物件後按下快捷鍵 Shift + A，Framer 會自動幫你加上一個 Stack 外框，並且設為 Fit Content。
Fill 與 Fit Content 的衝突
你可能也遇過這樣的警告提示，代表你設定上出現了「邏輯衝突」。
無限迴圈的矛盾 (The Impossible Layout)
如果父容器設定 Fit Content ，但子元素設定 Fill ，就會出現邏輯問題：
父容器說 (Fit Content )： 「裡面東西多大，我就多大！」(父容器想根據子元素縮放)
子元素說 (Fill)： 「外面盒子多大，我就多大！」(子元素想填滿父容器)
這時候誰也不知該聽誰的，就形成了無限迴圈。
Framer 的自動修正機制
當你試圖這樣設定時，Framer 會為了防止網頁崩潰，自動把其中一方強制改回 Fixed (固定尺寸)。
如果你發現你的 Fill 屬性一直「跳掉」變回 Fixed，請先檢查一下：
是不是父容器設了 Fit，導致子元素無法 Fill？
或者子元素設了 Fill，導致父容器無法 Fit？
所以要記得， 父子之間，必須有一個人是「有明確尺寸」或「有邊界依據」的，另一方才能依據他來設定大小！
結論
Framer 的 Fill 與 Fit Content 是設計網頁時絕對要搞懂的觀念，才能確保網站能有響應式設計！而不是浪費時間胡亂瞎點。建議大家直接打開 Framer，拉出一個卡片區塊，放入一些假字和假圖，使用 fr 來設定、或者切換看看 fill 和 fit content，會比單純看文章更有感覺喔！