Figma Design 教材 / Class LLL

卡片破版：用內容找出父子尺寸責任

從兩組真內容與窄寬觀察，再選流或列欄

卡片拉窄後溢位，先看內列、文字框與外框各由誰決定尺寸。用兩組原創繁中／英文內容、真瀏覽器量測與標籤排列比較，逐層修正，再把理由帶回Figma功能頁。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 18 分鐘

開啟互動教材查看參考來源

閱讀目標

把父子寬、文字高與外框高分別診斷
以長文、無圖、增刪及窄寬測規則
區分內容流換行與二維格線對齊需求
辨認位置例外須預留空間
不把本站CSS量測當Figma引擎

適用條件與學習範圍

換英文、加標籤或拿掉圖片後卡片破版，應改哪一層規則？拉窄外框與縮小整張卡片，為何不是同一件事？

可直接操作；需要時補文字尺寸、換行、格線及巢狀排版。功能各只有原正式頁，這裡聚焦選擇理由與壓力情境。

能逐層逐軸指出尺寸來源，使用內容極值檢查，再判斷要內容流、列欄或位置例外；不只縮字、裁切或縮小整張卡片。

兩組原創活動內容與有限Card／內列／文字／標籤關係；真DOM量測是本站CSS排版。不是Figma原生文字、CJK、所有依內容調整／填滿／格線、斷點、圖片焦點或全部約束求解器。

原理與判斷

「破版」不是一個數值。內列固定尺寸320超出父內容區、文字長過自己的固定高度，以及Card外框容不下內容，可能同時發生。修內列寬不會自動把文字框改為隨內容長高；Card包住內容也不會自動限制一個超長標籤。先從內容需求說出不能丟掉什麼，再決定尺寸責任：父層給可用寬、文字在那個寬內決定高度、外框是否跟著長。之後才問標籤應依自然寬流動，或需要二維列欄對齊。只有在另一語言、窄寬、少內容與無圖也能說明結果，才有理由把規則帶回設計稿。

先用原創內容列壓力條件

本例兩組是繁中週末工作坊與English workshop，標題、摘要、標籤及場地幾何圖皆原創。先看讀者要找的活動名稱與下一步，不用假文把框填漂亮。長標題、另一語言、更多／更少標籤、無圖及極窄寬分別重判；不是只把同一短字換顏色。本站沒有真報名或產品功能，卡片只是有限測試素材。

拉窄框架不等於縮小整張內容

普通框架改尺寸、約束及auto 排版父子尺寸是不同責任。若只縮放整張，字級與命中範圍也一起變小，可能只是把問題藏起來。本台字級固定，改Card外寬不縮字；16px左右內距先扣，再看內列固定尺寸320或填滿父內容寬。208外寬只剩176，固定尺寸320比可用多144；先修哪層要由這個差值決定。

逐軸追內列、文字與Card高度

官方巢狀例把每層自己的內距／間距與父層／子層尺寸調整分開，內列及文字寬可填滿、文字及父容器高依內容依內容調整，但要核該層是否auto 排版及功能有效條件。本台用CSS的相應原理比較，先內列寬、再文字高、再Card高逐項按，讀數不會把其他問題偷歸零。真正依內容調整／填滿不可用、互相限制或最小值／最大值，補讀唯一尺寸教程。

先看文字內容高，不拿平均字寬當實測

本站以同一份真文字DOM與Range行盒量測，保原文與20px字級／28px行高；固定28高時多行仍存在，可能與後續內容重疊。讓文字高隨內容只是本站CSS比較，不能宣稱重現Figma shaping、CJK標點、字型替代、自動行高或Balance／Pretty。原生操作需另核實際字型／版本與平台；缺字型也不等於長度問題。

換行選內容流，格線選二維關係

標籤需要自然寬、按內容順序流到下一行時先看換行；但換行不保證超長單項會自行縮小。若需求是對齊列欄、跨格或保持二維關係，再看格線的tracks、儲存格及子層尺寸條件。本站兩欄比較是自己的CSS Grid標本，不冒充Figma原生自動定位、依內容調整 tracks或完整跨格規則；功能細節到換行／格線正式頁核。不要只因格線看起來整齊就忽略長文字是否可讀。

極窄寬要處理單項，不只加換行

一個不可拆識別字可能比整個內容區還長，換行容器不一定救得了它。若這份文字允許斷行，可明設單項可用寬與換行；若不能拆，改成另一排列、可捲動或重新設內容層次後再驗，不能裁掉假裝完整。這是內容決策，本台只有具名可斷行樣本，不把一個CSS選項說成Figma通用自動修復。

拿掉圖、增刪內容，看空間是否真消失

無圖時原需求可能是不留圖位，而不是讓一個透明圖仍占高度；要說清楚隱藏／刪除與空間責任。增刪標籤後檢查行數、Card高度及閱讀順序，依內容調整需隨實際內容變動；固定高若仍是需求，也應交代截斷、展開或捲動的產品規則，不把未見內容當已容納。本站只移除原創圖例與有限標籤，沒有外部圖片授權或網路依賴。

位置例外仍需預留內容空間

角標若留在流內，就參與內容高度與順序；若忽略自動排版退出流，不能期待父層自動替它留位。官方指南的Ignore例外可配約束，不是所有auto 排版子層都完全不能用約束。本台比較普通流與覆蓋角標、明設預留寬後的實際矩形；不是Figma碰撞引擎、檢視範圍固定或自動避讓。如何設例外及父參考到巢狀／約束正式頁核。

把理由寫回規則，保留實測界線

目前三篇換行／格線／巢狀專文均列所有方案、可編輯；原生文字與尺寸另沿各功能當日來源。記這張卡為何填滿寬、為何文字／外框依內容調整高、何時用換行或格線，再用另一組內容重判。網站量測能支持本站這組CSS觀察，不能證明Figma設計檔或真人閱讀已通過；原生實測、可用性與學習成效均尚未執行。

步驟與觀察

列內容與極值
用兩組真標題／摘要／標籤與無圖，保必要資訊，列最窄寬及不能拆的文字。操作名稱對照（中文為本站教學譯名）：框架／nested auto 排版 > 排版 > 寬度／高度尺寸調整（介面原文：Frame／nested auto layout > Layout > Width／Height resizing） Text > dimensions／尺寸調整（介面原文：Text > dimensions／resizing）自動排版 > Horizontal／Vertical > 換行（介面原文：Auto layout > Horizontal／Vertical > Wrap）自動排版 > 格線 > columns／軌道 sizing（介面原文：Auto layout > Grid > columns／track sizing） Child > 忽略自動排版（例外位置）（介面原文：Child > Ignore auto layout（例外位置））
逐層逐軸找尺寸來源
從Card外寬扣內距，追內列固定尺寸／填滿，再看文字與Card高度；不要先縮整張卡。
修一個責任就再量
只修內列寬、只修文字高、只修外框高，各看剩餘溢位；原生功能有效條件回尺寸與文字正式頁。
依內容關係選換行或格線
自然寬流動與二維對齊分開，核超長單項、tracks與子層；不要只換容器模式就宣布解決。
測無圖、增刪及位置例外
拿掉圖或標籤看空間是否消失；角標退出流時明設預留空間，再看文字是否被蓋。
換另一語言與窄寬重判
保字級／原文，用真尺寸觀察再記規則與限制；回Figma以真字型／平台另測，不把本站成功當原生或學習證據。

常見問題

框架已窄，內列卻仍伸出

先扣內距，看內列是否固定尺寸320而非填滿；查父子與軸，不只裁外框。

寬度修好，文字還蓋後面

查文字固定高度與實際內容高；需要完整閱讀時讓高隨內容或明設展開／捲動規則。

Card 依內容調整後還有標籤超出

依內容調整高不等於限制單項寬；換行容器與超長子層條件分別核。

格線對齊卻讓長標籤難讀

查兩欄寬、文字可否換行、極窄時是否應減欄或改流，不以整齊取代內容需求。

無圖仍留大片空白

查圖是否仍在流內占位，區分移除、隱藏及產品是否需要保比例空位。

角標退出流就蓋住標題

例外不自動避讓；預留內側空間或回流內，核直接父層與約束適用條件。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design三種流程／巢狀：當日專文所有方案、可編輯。文字尺寸沿FG11、指南 Ignore例外沿FG13同日來源，不把普通約束與所有自動排版子層混教。來源狀態：2026-10-22 Scrapling新查水平／垂直Wrap、Grid、巢狀三篇；文字及Guide沿原實際當日查核。原生功能只引用責任與條件，完整教程仍唯一。示意限制：兩組原創內容及場地幾何圖、單一可切換真尺寸DOM與量測機構；Range行盒／DOM矩形同源，不用平均字寬。有限CSS比較，不重現Figma文字／格線／自動排版或自動斷點。原生軟體實測：未原生Figma建卡片、字型／跨平台或圖片操作實測；本站瀏覽器量測與官文查核分開。學習成效驗證：未真人可用性或學習成效實測。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。