Figma Design 教材 / Class LLL

換行：什麼時候換行，什麼仍會超出？

先看流動軸的可用空間，再查單項尺寸

標籤超出時，換行不等於自動縮小內容。改寬度、固定高度、項目數與長標籤，比較水平分行／垂直換欄、兩種間距及對齊，辨認長單項與交叉軸溢位。

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

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

閱讀目標

用主軸可用尺寸預測下一項是否換行／欄
區分同列項距與換行間距
改數量及長項後辨認仍會超出的原因
分清vertical wrap、masonry與格線

適用條件與學習範圍

開換行後，多數標籤會換行，為什麼一個很長的標籤仍可能超出？垂直時又該改寬還是高？

先理解自動排版方向／內距與固定尺寸、依內容調整、填滿的尺寸責任；下方可補讀已完成尺寸頁。

能以主軸可用空間、項目固定尺寸及順序判斷分行／欄，指出單項極值與交叉軸溢位，不把換行當固定欄列或masonry。

主教具只用固定尺寸A–E、固定父框、換行常開、數值間距與每行／欄主軸對齊；真文字、依內容調整／填滿分配、自動間距、baseline、格線及任意巢狀不冒充完成。

原理與判斷

換行在主軸空間不夠時，把下一項依序送到新行或新欄。它改的是排列，不保證縮小單項、增加父框尺寸、刪去長字，或讓二維對齊永遠成立。先指出Horizontal沿X、Vertical沿Y，再算扣除內距後的可用空間。只改框的另一軸，未必能解決當前分行；開換行後仍需回頭檢查尺寸責任與內容極值。

水平看可用寬，剛好放得下就留同一行

本台父框208寬、左右各12，可用184。A56、B64、C48，中間兩段間距8，剛好184，所以ABC同一行；再加D72就需要新行。寬改192，可用168，ABC放不下，變AB／CD；增加E後是AB／CD／E。這些是原創固定幾何，不是瀏覽器量出的標籤文字。減少內容也會收攏：只剩ABC時，208寬可一行容納；不是必須保留空的第二行。先只改寬度或數量，說清哪一項被推走；若同時改尺寸、間距與文字，會很難找出觸發條件。

垂直看固定可用高，不是masonry填洞

切Vertical後，沿Y從上往下放，固定高160減上下各12，得到136。A高28、B40、C32加兩段8共116可同欄，D再加28與間距會超出，才到下一欄。將固定高降128，可用104，ABC不再同欄；不是改寬就一定能提早換欄。官方明確要求以固定框架高度控制每欄何時開始，也明示Vertical wrap不是masonry。內容保持自動排版順序，不會跳去最短的一欄填空。本台長B只改寬度，垂直時可使欄變寬、甚至橫向超出，卻不因此改B高度或把它送到下一欄。

同一行項距，與行／欄之間距是兩條規則

換行開啟後可設定水平與垂直兩種間距；一個管同列／欄相鄰項目，一個管換行／欄的距離。水平模式下項距8決定ABC能否放入，行間距12則把下一行放在上一行最高項目之後；後者不會替當前行增加可用寬。本台每行／欄以最大交叉尺寸推下一條，再依起端／中央／末端分配該行／欄剩餘主軸空間。數值間距與對齊分開觀察；原生還有更完整的九點對齊與條件，本站僅取明示子集，不宣稱逐像素等同Figma。

對齊不保證換行數不變，自動選項另有開放條件

父層對齊與尺寸條件共同作用；若父層依內容調整而無額外空間，換對齊可能看不出變化。本台固定父框，所以短行的中央／末端可見移動；剛好佔滿184的ABC則不需要額外位移。原生數值間距有九個對齊組合；虛線間距設自動時可用對齊隨流程改變。自動間距的Between、Evenly、Around是間隔分配，不能混成普通九點對齊的名稱。2026-10-22來源仍標Evenly／Around逐步推出，協作者可能不同時取得；空間不足時自動間距停0，不變負。本站只用非負數值間距，沒有假裝已模擬這些自動分配。

單一長項仍有自己的尺寸責任

本台B從64改固定224；在208父框內可用184，B單項就超長40。換行會給它自己一行，但不自動把224縮成184，也不在標籤內自動斷字。若內容的文字框能換行、最小值／最大值或填滿另有規則，需回尺寸頁按真實層級處理。換行也會增加交叉軸需求；父高固定時，行太多可能往下超出。垂直換欄則可能往右超出固定父寬。本台外側深色支撐是為顯示溢出，不是父框依內容調整變大；超出內容區的X／Y讀數保留，不靠裁掉圖形假裝解決。

換行保留內容流，格線負責另一個問題

換行依每條主軸可用空間重新分組，行與行的邊界不必對齊；格線另以列欄／儲存格安排二維關係。不能因為換行排出兩行就認定已建立兩列三欄，也不能把參考版面參考線當成真正排版規則。將自己的短標籤、長單項、更多數量、不同語言及窄寬帶回原生檔，先指出哪個軸限制、哪一項超長，再決定調尺寸、文字模式、換行或改格線。本站有限模型不保證原生字型、填滿分配、輸出或學習效果。

步驟與觀察

保留來源並核對自動排版父子
在可編輯的Figma Design檔建立幾個普通固定尺寸標籤，保留母稿；核對自動排版父框、子層歸屬、內距及各自寬度／高度責任，不先以拖曳猜問題。操作名稱對照（中文為本站教學譯名）：選自動排版框架 > Horizontal／Vertical 流程 > 換行（介面原文：選Auto layout Frame > Horizontal／Vertical flow > Wrap）右側自動排版 > 間距／alignment（介面原文：右側Auto layout > gap／alignment）寬度／高度 > 固定尺寸（介面原文：Width／Height > Fixed）
選流程後開換行
選自動排版框架，在右側選Horizontal或Vertical 流程，再打開換行。Horizontal沿X分行；Vertical沿Y換欄，設固定框架高度才有明確欄觸發。介面與語言依當前版本核對，不把網站按鈕當Figma快捷鍵。
一次改主軸尺寸或數量
水平先只改寬，垂直先只改固定高；觀察下一項在哪裡換行／欄。增加或移除一項再比較順序與空間，若子層跟著縮放先回查依內容調整／填滿與最小值／最大值，不照搬本站固定項目答案。
分開調兩種間距與對齊
辨認同列項距與行／欄間距，逐項修改，保留其他規則；對齊設在父層，不能隨意逐子層當自由位置。自動間距的可用對齊、逐步開放Evenly／Around與不足歸0另核，不硬找不在帳戶介面的選項。
加入一個超長項測失敗
用一個超出可用尺寸的固定項目，指出換到新行仍可能溢位；再核對文字框、最小值／最大值及是否允許改尺寸。不要為了讓圖好看就刪掉長內容或把框架裁切內容當成排版已修好。
以二維需求決定下一步
記錄主軸／交叉軸、順序、可用尺寸、單項極值與間距。若需要跨行列邊界穩定或跨格，另比較格線；若要masonry，不把Vertical wrap當等價替代。回原生檔案及目標尺寸驗證。

常見問題

開換行後長標籤還是超出

查單項固定寬、文字模式及最小值／最大值；換行給新行不等於替單項縮小或斷字。本站長B224對184可用寬仍超40。

Vertical一直不換欄

先查父框是否有固定可用高度，再看項目高度與主軸間距；不要只改寬度或把依內容調整沒有高度邊界當功能失效。

行間距變大，卻沒改變第一行放幾個

行間距管交叉軸，同列項距與可用寬才直接決定水平當前行容量；按軸分開修改。

垂直欄像瀑布流那樣沒有填洞

官方明示不是masonry；它保持順序，填到可用高度才換欄。需要其他排列策略應換方法，不用改層順序掩蓋差別。

協作者沒有Evenly或Around選項

來源仍標逐步開放；先用已可用的數值間距及對齊，不把新自動間距當所有帳戶共同前置。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design，官方流程專文列所有方案、可編輯；Horizontal及Vertical 換行均有正文。Evenly／Around 自動間距仍逐步推出，不保證協作者同時取得；桌面／瀏覽器及語言入口依當前環境。來源狀態：2026-10-22依robots單線Scrapling --ai-targeted新抓並讀flow相關主體；S04 Guide為21日保存來源作先備，日期分開，不冒稱全部新抓。示意限制：原創固定A–E、12內距、常開換行、單一順序分行模型；長B寬度預設64／長224，不量字、不模擬真文字或Figma引擎。只數值間距與主軸對齊子集，無自動間距、依內容調整／填滿、格線或masonry；素材原創。原生軟體實測：未原生Figma操作／輸出實測；官方來源與本站瀏覽器驗證分開。學習成效驗證：未真人試用，無學習成效或遷移證據。

參考來源

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