Flex 版面概觀

上次更新時間 2026年8月7日

使用 InDesign 中的「Flex 版面」面板來建立、對齊、設定方向、換行、齊行和設定 Flex 版面中項目的間距。

什麼是 Flex 版面?

Flex 版面」這項功能可讓您建立隨內容變更自動適應的容器。 容器中的項目是使用方向、間距、邊距和對齊方式來定位。 當新增、移除內容或調整內容大小時,版面會自動調整,無需手動調整。

存取 Flex 版面選項

在您的文件中選取物件/群組/多個物件,並執行下列其中一項操作以存取「Flex 版面」選項:

  • 前往「物件 > Flex 版面」。
  • 在物件上按一下滑鼠右鍵,以存取「Flex 版面」。
  • 前往「視窗 > Flex 版面面板」。
  • 選取一次可使用父層 Flex,按兩下可選取子層。
  • 使用「直接選取 工具以選取子項目。

新增至 Flex 版面

將選取的物件新增至「Flex 版面」。

轉換為 Flex 版面

將物件 (矩形框架、矩形形狀或群組) 轉換為「Flex 版面」。

移除 Flex 版面

從選取範圍移除「Flex 版面」。 如果「Flex 版面」中有多個物件,則會建立群組。 如果只有一個物件,該物件將保持原狀。

顯示 Flex 控制項

開啟「Flex 版面」面板 (替代「屬性」面板)。

Flex 版面」在 InDesign 中引進了類似 CSS Flexbox 的容器概念。它為子物件提供了強大的版面控制效果。透過「Flex 版面」,設計變得更有條理、更具適應性,且僅需較少的手動調整。

Flex 版面配置容器

您可以直接在「物件樣式」中設定「Flex 版面」屬性。您可以建立名為「垂直容器」且版面包含「Flex 版面」設定的「物件樣式」,然後將其套用至版面中的任何「Flex 版面」容器。

範例:

使用「物件樣式」面板來套用「Flex 版面」,並設定如方向、對齊和間距等屬性。儲存後,將此樣式套用至其他容器,以獲得一致的版面行為。

Flex 版面子層

在「物件樣式」中的相同「Flex 版面」區段也可以定義「Flex 版面」子層元素及其巢狀子層元素的屬性,讓您能將版面中的行為標準化,例如固定或彈性尺寸等。

  • 直接建立互動式元素:將「Flex 版面」內的子層元素轉換為互動式元素,無需單獨建立並將其新增至「Flex 版面」。
  • 鎖定子層元素:鎖定「Flex 版面」內的一或多個子層元素,以防止直接拖曳、調整大小或將其移出框架,同時仍允許使用鍵盤方向鍵變更位置。
  • 子元素的鍵盤導覽:在水平版面中使用向左鍵或向右鍵,或在垂直版面中使用向上鍵或向下鍵來重新定位鎖定或未鎖定的元素。
秘訣

您可以使用「物件樣式」在鎖定的 Flex 框架內定義 Flex 屬性。

「Flex 版面」面板

若要存取面板,請前往「視窗 > Flex 版面」。 「Flex 版面」面板會開啟。 您現在可以建立或新增「Flex 版面」,或根據需求自訂現有項目。 如果沒有選取項目,您可以使用面板來變更預設 (適用於關閉自動偵測的情況)。 導覽至偏好設定 > 一般 > 自動偵測並套用 Flex 版面配置設定以檢查自動偵測設定。

「Flex 版面」面板顯示各種可建立 Flex 版面的選項

A. Flex 容器的寬度 B. Flex 容器的高度 C. 換行 D. Flex 版面中物件的方向 E. 垂直間距 F. 水平間距 G. 邊框間距  H. 齊行 I. Flex 版面中物件的對齊方式 

寬度」和「高度

Flex 版面」容器和其子元素的大小可以獨立控制。若為「Flex 版面」容器,其寬度和高度可為:

  • 固定:容器大小保持固定,不受其內容影響。
  • 自動:容器大小會根據其子元素的大小而增長或縮小。

若為「Flex 版面」子元素 (包括巢狀「Flex 版面」),則是:

  • 固定:子元素大小保持固定,不受其本身內容影響。
  • 自動:子元素大小會自動調整以適應其本身內容或子元素。
  • 填滿空間:子層會展開以占用該維度中的剩餘可用空間,並視需要與其他「填滿空間」同層共用空間。

換行

開啟或關閉容器中的物件環繞。

方向

選擇項目在容器內的流動方式(列、列反轉、欄、欄反轉)。

間距

控制邊框間距和間距。

  • 邊框間距:定義容器內部所有側邊 (上、下、左、右) 的間距。
  • 水平間距 :在水平方向於項目之間設定一致間距。
  • 垂直間距 :在垂直方向於項目之間設定一致間距。

齊行

控制項目沿主軸的分佈。

將列對齊至「Flex 版面」的開始位置,並將項目對齊至列的開始位置。

將列對齊至「Flex 版面」的中心,並將項目對齊至列的中心。

將列對齊至「Flex 版面」的結束位置,並將項目對齊至列的結束位置。

對齊列中的項目,以達到下列效果 –

  • 每個項目兩側的間距相等。
  • 邊緣項目只有一側露出;邊緣的間距是項目之間間距的一半。

對齊列中的項目,以達到下列效果 –

  • 第一個項目貼齊起始邊緣,最後一個項目貼齊結束邊緣。
  • 其餘項目僅在中間均勻分佈。
  • 沿主軸均勻分佈項目,第一個項目在起始處,最後一個項目在末端。
  • 外緣無間距。

對齊列中的項目,以達到下列效果 –

  • 在各處保持相等間距:項目之間和邊緣處。
  • 一切都確實平均。

對齊方式

跨軸對齊項目:「」、「」、「」,或「」、「」、「」。

左上:將列對齊至「Flex 版面」容器的左上,並將列中的項目對齊至列的左上。

左側置中:將列對齊至「Flex 版面」容器的左側中心,並將列中的項目對齊至列的左側中心。

左下:將列對齊至「Flex 版面」容器的左下,並將列中的項目對齊至列的左下。

頂端置中:將列對齊至「Flex 版面」容器的頂端中心,並將列中的項目對齊至列的頂端中心。

置中:將列對齊至「Flex 版面」容器的中心,並將列中的項目對齊至列的中心。

底部置中:將列對齊至「Flex 版面」容器的底部中心,並將列中的項目對齊至列的底部中心。

右上:將列對齊至「Flex 版面」容器的右上,並將列中的項目對齊至列的右上。

右側置中:將列對齊至「Flex 版面」容器的右側中心,並將列中的項目對齊至列的右側中心。

右下:將列對齊至「Flex 版面」容器的右下,並將列中的項目對齊至列的右下。

Flex 版面中的選取範圍指示器

InDesign 使用視覺提示來協助您了解 Flex 版面中的選取狀態:

  • 虛線外框表示非作用中的版面層級。
  • 實線外框表示可選取的同層級框架。
  • 直接選取工具可讓您直接選取巢狀框架,無需重複點按。

這些指示器有助於在使用巢狀版面時釐清階層和選取焦點。

畫布上的邊框間距和間距控制項

Flex 版面提供互動式畫布上控制項,可用於調整邊框間距和間距:

  • 連結的邊框間距:同時調整全部四個邊框間距值。
  • 未連結的邊框間距:獨立調整每一邊。
  • 水平和垂直間距:直接修改項目之間的間距,包括換行的列或欄。

版面上的視覺指示器會反映目前的值,並在 Flex Layout 面板中即時更新。

變形和傾斜 Flex 版面框架

您現在可以旋轉、鏡像、縮放或傾斜 Flex Layout,而不會中斷其行為。 在您變形物件時,變形會套用至父層和巢狀 Flex 框架,而且「Flex 版面」面板會保持作用中。 這可讓您在轉換版面時調整對齊、間距、換行和方向,而不會破壞 Flex 結構。