Figma Design 教材 / Class LLL

自動排版：位置由哪條排版規則決定？

先分清項目間距與容器內距，再改對齊

按鈕間距不一致時，先找父容器的規則。切換水平／垂直、改間距和內距、對齊與子項順序，再增減內容，觀察同一串項目如何重新排列。

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

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

閱讀目標

辨認父容器與參與排列的子項
分清間距、內距與 alignment 的作用
切方向並預測每項位置
增減或重排內容後說出變化原因

適用條件與學習範圍

為什麼拖動一顆按鈕會被排回去，而改父容器的一個數值卻讓整串按鈕一起移動？

先能從圖層面板指出父容器與子項；不清楚框架邊界時，可由下方補讀框架與群組。

能從方向、子項順序、間距、內距及對齊解釋位置，增減項目後區分變動的是間隔數、內容長度還是剩餘空間。

限水平或垂直單流、固定尺寸的基礎規則。依內容調整／填滿與最小最大值、換行、格線、巢狀及忽略自動排版由後續問題承接；不宣稱這個輸送台是完整Figma排版引擎。

原理與判斷

自動排版把一組內容的位置交給父容器規則管理。改其中一項的自由座標，往往不是處理間距的正確入口；先指出誰承接排版、哪些子層參與，再改方向、項目間距、容器內距及對齊。這些控制有不同責任：間距放在相鄰項目之間，內距隔開容器邊與內容區，alignment分配內容之外的空間。方向改變的是流動軸；子項順序改變的是誰先誰後。

先找承接規則的框架

自動排版套用在框架。選取普通多層或群組加入自動排版時，Figma會以新的自動排版框架承接；不要把這理解為所有重疊物件都自動有排列關係。由圖層面板找父層，再看右側排版的流程與控制，確認你改的是父層而非一顆按鈕。這頁的四邊外軌代表固定280×280容器；每個A／B／C內容塊固定40×40。尺寸只是本站原創算例，與你的按鈕文字、字型或Figma預設無關。

方向與順序，分別回答哪條軸及誰先

Horizontal 流程沿X排列，Vertical 流程沿Y排列。保持ABC順序切方向後，A仍先於B及C，只是位置由橫向轉成縱向；本模型不旋轉方塊或改其尺寸。按「反轉子項順序」會讓ABC成CBA，讀數與方塊字母一起改。這是內容排列的順序；當負間距重疊時的Canvas stacking只控制誰畫在上方，不會改圖層面板順序，兩者不可混為一談。原生實例不能直接任意重排內部項目；應回正確main處理，不能為了拖動就隨意解除連結。

間距只放在相鄰兩項之間

預設三項各40、間距12，內容串長144：三個40加兩個12；再加兩側內距20，所需長184。不是三個間隔，也不是在每項外面各放12。改間距20後串長160，但每一項仍40、容器內距仍20。增加第四項時，間隔從兩段變三段；減到一項時，沒有相鄰間隔，因此改間距不會改那一項的位置或所需長度。增加／刪除／隱藏內容會讓原生流程重新安排；不透明度 0仍可能保留空位，不等於隱藏。本站只示範增減，不假裝已模擬隱藏或透明度。

內距決定內容區，alignment用剩餘空間定位

四邊內距20把內容區縮為240×240。預設水平串長144，所以主軸剩96；起端時A在(20,120)，中央時A在(68,120)，末端時A在(116,120)。這三個獨立算例讓你辨認：中央並非把每個方塊各自放在容器中心。沿排列方向對齊移動整串；垂直於排列方向對齊控制交叉軸。選「垂直排列」後，前者沿Y，後者沿X，兩者不固定等同左或上。本站兩個三選控制合成九個組合，原生數值間距亦有九種對齊。真實父層若依內容調整而沒有多餘空間，同軸換alignment可能看不出變化；先查尺寸責任，不判定功能壞掉。

負數值間距與自動間距，是兩個條件

把數值間距改成−12，相鄰40的內容只前進28，形成12的重疊；三項內容串長96。本站後項在上，反轉順序也會換誰蓋住誰。這不是刪除內容或把間距歸零。官方另有自動間距的Between／Evenly／Around分配；空間不足時自動間距停在0，不變成負值。Evenly／Around在保存來源中仍標逐步推出，不能承諾所有帳戶介面都有。本站完全不模擬自動間距；讀數中的數字始終是數值間距，沒有把兩種模式暗中合併。

把規則帶回真實內容，停止在本頁邊界

拿自己的三顆短按鈕，先只改方向，再分開改間距、內距、alignment，最後增減或重排一項。每次說出哪個父規則變了、哪些子層會回應；不要同時拖尺寸及改多個值而失去原因。換長文案、窄容器或巢狀內容時，接著查固定尺寸／依內容調整／填滿、換行／格線、忽略自動排版及各層描邊設定。內側描邊是否included是各框架自己的計算條件，不能拿本頁沒有描邊的40單位結果當工具通用答案。本模型所有允許組合保留非負餘量，不測溢位對齊或文字引擎。

步驟與觀察

保留母稿並建立三項
在可編輯的Figma Design檔建立三個普通矩形或短按鈕，命名A／B／C，保留副本。先確認它們不是受來源限制的實例內部結構；無需下載官方素材或連結本站帳戶。操作名稱對照（中文為本站教學譯名）：選取框架 > 右側排版 > Add auto 排版（介面原文：選取 Frame > 右側 Layout > Add auto layout）選取內容 > 右鍵 Add auto 排版（介面原文：選取內容 > 右鍵 Add auto layout）自動排版 > Horizontal／Vertical 流程（介面原文：Auto layout > Horizontal／Vertical flow）
加上自動排版並核對承接框架
選取內容，使用右鍵Add auto 排版、右側排版入口，或官方預設Shift+A。若原來是群組或普通多層，確認新自動排版框架與圖層面板縮排；瀏覽器／桌面、語言與自訂快捷鍵依實際環境核對。
一次只切流程，再調順序
在右側排版切Horizontal或Vertical 流程，觀察位置而非縮放。選普通自動排版框架中的子層，以拖曳或方向鍵重排，辨認插入位置；元件實例的內容重排有來源限制，先回main判斷。本站方向按鈕及反轉按鈕只是原理對照，不是原生快捷鍵。
分開設定間距與內距
在父框架右側設定數值間距，再改內距；原生可統一、水平／垂直或分四邊，本站只用等四邊。量測相鄰邊與容器邊兩種距離，再加一項檢查n項只有n−1段間距。負數值會重疊，不要與自動間距的空間分配混用。
保留餘量比較九種對齊
先讓容器比內容大，辨認目前主軸與交叉軸，再試起端／中央／末端組合。若依內容調整沒有多餘空間，先記錄這個條件，不能為了讓對齊看起來有動就誤判尺寸規則；完整尺寸模式另接續學習。
增減內容後說明原因
在普通可編輯框架增減或重排一項，觀察剩餘空間與間隔數；保留母稿以便復原。若要保留空位，分清隱藏與不透明度0。將規則、適用層級及失敗條件記下，再換長文案／窄寬找下一個尺寸問題。

常見問題

間距不均，拖完子層又回到原處

先選對自動排版父框架，辨認間距和內距的責任；不要用自由座標修補受流程管理的位置。真正需要自由位置時另查忽略自動排版，超出本頁。

改內距，卻以為按鈕之間也要一起變

內距隔開容器與內容區，間距才控制相鄰兩項。先固定其他值，讀兩種邊到邊距離；置中時可見邊距還會含分配的剩餘空間，不必然等於內距。

切對齊，看起來完全不動

查主軸／交叉軸，以及父層是否依內容調整或剩餘空間為0。本站固定較大容器才讓對齊可觀察；不能用它推論所有父層都該移動。

重疊時改了畫布 stacking，順序卻沒變

Canvas stacking只改遮擋順序，不改圖層面板及流程順序。要換誰先誰後應重排子層；負數值間距與不足空間的自動間距也要分開核對。

隱藏一項後收攏，卻想留下原空位

官方區分隱藏與不透明度0；後者可能仍占位。先決定要移除流程參與或只改顯示，別用透明度掩蓋內容及互動責任。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design，所有方案；建立／編輯需要編輯存取權。瀏覽器／桌面及Windows／macOS入口以當前環境核對。數值間距與單列／單欄不是測試版資格承諾；自動間距 Evenly／Around在保存來源仍標逐步推出。來源狀態：2026-10-22讀取研究交接與S04／S05（2026-10-21正文快取）及N08（2026-10-22正文查核）。日期分開保留，未將舊快取冒稱今日重新抓取；未核所有Auto layout家族子功能。示意限制：原創輸送台及40×40內容塊，固定280×280容器／等四邊內距／數值間距／1–4項；方向、順序、對齊、增減同源。非Figma引擎，無依內容調整／填滿、自動間距、文字、描邊、換行／格線、巢狀或溢位模型。素材均本站原創，無官方全文或練習檔重刊。原生軟體實測：未在原生Figma操作或輸出實測；官方文件查核與本站公開瀏覽器驗證分開。學習成效驗證：未真人試用；沒有學習成效或遷移證據。

參考來源

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