認識 Framer Stack：響應式排版的核心工具

Framer 的四種排版容器

在認識 Stack 之前，先快速了解一下 Framer 有哪幾種排版工具。打開左上角的 Layout 選單，會看到四種容器：

• Frame（框架）：最基礎的容器，不會自動對齊，子元素用絕對定位 (Absolute) 手動定位。詳細說明可以看《版面又跑掉了？Framer 新手必修課：一次搞懂 Absolute 與 Relative 定位》。

• Stack（堆疊）：子元素沿單一方向排列（橫向或直向擇一），自動對齊與分配間距。

• Grid（網格）：子元素排成網格（橫向及直向），可以精確控制欄數和列數。

• Masonry（瀑布流）：每一格的高度可以不一樣，像 Pinterest 那種錯落排列，常用在圖片集或貼文牆。

Stack 是其中最常用的容器，從按鈕、選單、卡片到整個頁面的垂直結構，幾乎都離不開它，網頁基本上就是由層層的 Stack 組成。

Stack 是什麼

Stack 是讓子元素沿著一條線自動排列的容器，可以是橫的一排，也可以是直的一列。如果你用過 Figma 的 Auto Layout 或 CSS 的 Flexbox，Stack 的邏輯幾乎一模一樣。這樣自動排列的特性，加上 Fill 與 Fit Content的運用，可以讓響應式設計更快的完成。

建立 Stack 幾種的方法

1. 選單點選：左上角 Layout → Stack，直接建立空的 Stack 容器

2. 快捷鍵 S：按下後就能拖曳框出範圍

3. 右側屬性面板：選取任何一個 Frame，在右側 Layout 區塊按 + 就能直接把現有的 Frame 變成 Stack。

4. Cmd + Option + Enter / Ctrl + Alt + Enter：先選取一個或多個現有元素，再按下組合快捷鍵，Framer 會自動幫你把選取的元素包進一個新的 Stack 裡。

Stack 的設定選項

選取一個 Stack 後，右側屬性面板的 Layout 區塊會出現選項可以調整：

1. Type（類型）：可以在 Stack 和 Grid 之間切換。

2. Direction（方向）：決定子元素沿哪個方向排列。

3. Distribute（分佈）：子元素「順著排列方向」要怎麼分佈，常見選項有

• Start：靠起點集中

• Center：置中

• End：靠終點集中

• Space Between：兩端對齊，中間平均分配

• Space Around：每個元素左右間距相等

• Space Evenly：所有間距完全相等（包含起點和終點）

4. Align（對齊）：子元素「垂直於排列方向」要怎麼對齊。三個按鈕分別代表起點對齊、置中、終點對齊。

5. Wrap（換行）：當子元素超出容器寬度時，要不要自動換到下一行，這個設定讓 Stack 也能做出多列效果。

• No（預設）：所有元素塞在同一行，超出容器會被截斷或產生捲軸

• Yes：超出容器寬度時，元素自動換到下一行

6. Gap（間距）：子元素之間的距離。Wrap 開啟時，Gap 會分成 X 軸（橫向）和 Y 軸（縱向）兩個值，可以分別設定每行間和每列間的距離。

7. Padding（內距）：Stack 容器本身的內邊距，可以統一設定，也可以點開分別設定上、下、左、右四個方向。

💡 Distribute 和 Align 的差別：Distribute 管「主軸方向」、Align 管「副軸方向」，例如 橫排時，Distribute 控制元素的「左右位置」、Align 控制「上下對齊」；直排時，Distribute 控制元素的「上下位置」、Align 控制「左右對齊」。有點搞不懂沒關係，實際操作時看著畫面試一下就能瞭解了～不用硬記

Stack 最適合哪些情境？

來看看實際上最常用到 Stack 的三個場景：

按鈕內的「圖示 + 文字」

按鈕內如果有圖示和文字並列，兩者之間需要固定間距。

導覽列（Navbar）的橫向選單

首頁、關於、作品集、聯絡這些連結需要水平排成一列。用 Stack 橫排，Gap 控制每個連結之間的距離，未來增減選單也不用手動重新對齊。

如果想做「Logo 在最左、選單在最右」的常見 Navbar 設計，把 Distribute 設成 Space Between 就直接搞定！

卡片內的垂直堆疊

一張卡片裡常常有標題、描述、按鈕等等元素要排列。用 Stack 直排，Align 設靠左對齊，再用 Gap 控制元素之間的垂直間距，就是一個乾淨俐落的卡片結構。

結語：熟悉 Stack是掌握響應式設計的第一步

Stack 是 Framer 排版的核心工具，大部分的線性排版需求都能搞定，不僅解決了跑位的問題，更是未來製作「響應式網頁（手機版與電腦版切換）」的重要基石。

但有些版面 Stack 處理不來，例如部落格文章的卡片牆（每張卡片要等寬等高）、Bento 風格的錯落版面（有大有小的格子），這時候就是 Grid 出場的時機，之後會再寫一篇介紹！

如果你在練習時有卡住的地方，或想分享你的設計，歡迎加入我們的 Discord 社群，跟一群正在學 Framer 的夥伴一起交流！