Figma Design 教材 / Class LLL

巢狀排版：角標跟內容，還是跟框邊？

先查直接父層，再分流內尺寸與位置例外

角標跑掉可能來自不同父層、內容順序或尺寸責任。改卡片寬與長文字，對照內列填滿／固定尺寸、角標在流內或忽略自動排版，觀察父框高度、頁腳與重疊如何一起變。

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

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

閱讀目標

指出巢狀每層同時作父層及子層的責任
比較內列固定尺寸與填滿對窄卡的影響
分清角標跟隨內容或相對框邊定位
用內容極值驗證響應條件，不宣稱自動斷點

適用條件與學習範圍

角標應隨內容往下，還是留在卡片右上？巢狀內列變寬後，究竟要改哪一層規則？

先分清固定尺寸／依內容調整／填滿、一般框架的直接父層約束；本頁真補讀這兩份已完成教材。

能說出角標的直接父層、是否在流程、尺寸由誰負責，分辨內容順序與框邊約束，指出窄框或長文字失敗應回查哪層。

固定兩層Card垂直／Row水平，原創等寬字塊；只比較內列填滿／固定尺寸與角標右側＋頂部／底部，不模擬原生字型、任意巢狀、所有constraint、斷點或瀏覽器響應引擎。

原理與判斷

巢狀不是把同一條排版規則套到所有後代。內列是外卡的子層，也同時是圖示與文字的父層；它可以對外填滿、對內水平排列，每層仍有自己的內距與間距。找錯層級，常會把文字、卡片與角標的責任混在一起。忽略自動排版把子層退出流程，但不移出父框架；角標與周圍兄弟不再替彼此讓位。它可依直接父框架用約束回應尺寸，卻不因此自動避開長文字、固定在螢幕或產生斷點。

先畫父子樹，再逐層問寬高怎麼來

本台Card為垂直自動排版，直接孩子是Row、角標與頁腳；Row另為水平自動排版，孩子是圖示與文字。Card 內距16、間距12；Row 內距8、間距8，兩組數值互不代替。對Card而言Row是子層；對文字而言Row是父層，不能越過它直接拿Card總寬算文字。 Card固定寬288，扣左右16給Row的填滿寬256；Row再扣左右8、圖示24及間距8，文字可用208。Card高依內容調整依流內孩子計算；Row高依內容調整依圖示及文字高度計算。原生可混合水平／垂直／格線等flows，但本站固定兩層，先讓責任能逐層指出。

窄卡先查內列填滿，別只把最外框拖小

將Card寬降192，內容區只160；Row 填滿跟成160，文字可用112，長內容可能增加行數，推高Row與Card。改Row 固定尺寸224後，Card變窄不會讓它跟縮；它比160內容區多64，可能跨出父框，改父框裁切內容只是遮住，不是修好尺寸責任。內列對外填滿、對內文字填滿並不代表任意同軸依內容調整與填滿能互相循環。先給上層可用寬，再分配下層；遇最小值／最大值、固定文字框、長字串或字型時回尺寸頁及原生檔核對。本站每字16格估算，不用瀏覽器字寬宣稱真實Figma斷行答案。

流內角標隨順序移動，也參與依內容調整高度

角標留在流程時，它像普通子層，Card會為它的20高及相鄰間距留位。預設Row→角標→頁腳：短文字Row高40，角標Y68，頁腳Y100，Card高140。把角標排到Row之前，角標Y16，RowY48，總高相同；長文字則推高Row，影響後面的兄弟。原生以圖層面板／畫布可用的排版重排入口確認子層順序；不要靠逐個自由拖位置當成穩定排版。普通自動排版流內子層使用尺寸調整與父層排版，不能同時假套一般框架的約束；角標要跟內容走，就先保留流內再調順序、間距或內距。

忽略自動排版仍在Card，改用框邊關係

當期名稱是忽略自動排版，官方註明舊稱absolute 位置。選自動排版子層，在右側欄點忽略自動排版；它仍是Card的子層，退出流程後與兄弟互相忽略。此時可用位置 > 約束，其他流內尺寸調整／排版選項不適用。本站只採具名按鈕入口，不推測來源中異常的Windows拖入快捷鍵。本台退出後改以右側12＋頂部12比較，角標(236,12)，Card不再為它留位，從140縮到108、頁腳Y68。這個重新定位是本站比較動作，原生開關本身不保證自動移到右上或自動套右側。若選底部12，則隨Card下邊；它不是固定於檢視範圍，也不是原型捲動定位設定。

例外不會自動避讓，預留空間也要選對層

角標靠右上時，Card加寬使它跟右邊走，Row變高卻不會把頂部12推下。長文字可能與角標重疊；這正是退出流程的代價。靠底部則跟Card底邊，Card因內容增高時角標也往下，但仍不保證避開頁腳或其他物件。本台可將Row右內距8改60，為角標留52額外空間；這是設計者明確修改內層規則，並非Ignore自動避碰。可用文字寬變小，也會增加行數和依內容調整高度。固定Row仍可能超出窄Card，這一招不能保證所有組合安全；讀數僅算原創字塊／圖示／頁腳矩形與角標的幾何重疊，真文字可讀性需原生檢查。

響應式有條件，不會自行發明斷點

官方巢狀範例逐層設定填滿寬、依內容調整高與不同flows，靠這些條件讓內容回應尺寸；不是只加一層自動排版就完成所有裝置。正常流程控制內容順序與空間，Ignore搭約束控制相對框邊，固定尺寸保尺寸但可能溢位，填滿依可用尺寸改變，各自有取捨。卡片變窄不會憑空把水平Row切垂直、隱藏角標、換字級或建立斷點。若需要這些轉換，另明確設計及在目標介面實作；也不能把Figma圖直接等同CSS position:absolute或完整網頁響應引擎。用更多內容、長語言、窄寬及實際字型驗證，說清最外層固定界限與每個內層責任。

步驟與觀察

保留母稿並核對直接父層
在可編輯的Figma Design檔保留卡片母稿；從圖層面板確認Card、Row、文字、角標及頁腳的真歸屬。需要框邊定位先確定是相對Card還是Row，不能由畫面重疊猜父層。操作名稱對照（中文為本站教學譯名）：圖層面板 > 核對Card／Row／子層父子（介面原文：Layers > 核對Card／Row／child父子）選框架 > 自動排版流程／寬度／高度（介面原文：選Frame > Auto layout flow／Width／Height）選自動排版子層 > 忽略自動排版（介面原文：選Auto layout child > Ignore auto layout）位置 > 約束（介面原文：Position > Constraints）
分層加入流程及尺寸責任
Card設Vertical 流程，Row設Horizontal 流程；逐層設內距／間距。先給Card可用固定寬，Row對外填滿、對內文字填滿／高度依內容，確認頁腳及容器依內容調整高度。
用窄框與長內容檢查
分開改Card寬、Row 固定尺寸／填滿及文字，觀察是哪層固定尺寸造成超出、哪層依內容調整隨內容增加。原生文字模式及最小值／最大值另查，不照搬本站16格文字答案。
在流程中確認角標順序
角標需跟內容就保留流內，調子層順序並觀察後續位置與Card高。普通流內子層不套一般框架約束；改錯層先返回圖層面板確認。
需要框邊例外才退出流程
選角標點右側欄忽略自動排版，再明確定位、設定位置 > 約束的右側與頂部／底部。觀察同層項目不再避讓及依內容調整不再計它；開關不等於自動右上、避碰或檢視範圍固定。
回測極值並交代停止邊界
以長字、窄寬、不同字型測重疊與裁切；若需保留空間，明確調相關層內距或改設計。若需流程切換／斷點，另訂規則及目標平台驗證，不把自動排版視為全部完成。

常見問題

改Card寬，文字列卻不縮

查Row對Card是否固定尺寸、文字對Row是否填滿，逐層算可用尺寸；不要越過直接父層或一律靠外框裁切。

角標開Ignore後頁腳往上、框變矮

這個子層退出流程，不再替它留位；若需要保留空間，回流內或明確設內距／其他結構，不假設開關自動補洞。

角標在右上卻遮到長文字

右側／頂部只維持框邊關係，不使兄弟避讓。核對直接父層、文字極值及預留空間，必要時改流內或布局。

普通流內子層找不到約束

自動排版流程以尺寸調整／排版回應；只有Ignore例外可按一般框架子層用約束。也要分清自動排版框架自身若位於一般框架內的另一層約束。

做了巢狀但手機沒有自動換方向

巢狀會依明確尺寸與流程回應，不自動產生斷點。決定何時切流程／改結構，再於目標介面驗證。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design，巢狀及約束官方專文列所有方案、可編輯；不宣稱自動斷點或網站CSS等價。當期忽略自動排版舊稱absolute 位置；桌面／瀏覽器與語言入口依當前環境。來源狀態：22日依robots單線Scrapling --ai-targeted新抓巢狀專文並讀正文；Ignore／Constraints沿FG13同日新抓C02／C01保存來源再讀，不冒稱本票全部重新抓。Windows拖入快捷鍵文字異常，只採右sidebar具名入口。示意限制：原創兩層固定寬Card／Row，依內容調整高與文字填滿的16格離散估算；角標退出流程後本站按同一右側12＋頂部／底部12基準重定位，非原生切換保證。可明確加Row右內距，矩形重疊非真字可讀性。無原生字型、任意巢狀、格線／換行／最小值／最大值或斷點引擎，素材原創。原生軟體實測：未原生Figma實測；來源查核及本站瀏覽器結果分開。學習成效驗證：未真人試用，未證實學習或遷移成效。

參考來源

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