框架

框架（也稱為 CSS 框架）是用於組織佈局的表示屬性。它提供了重新排列和調整框架內容大小的適應性，以產生動態的、可接受的設計。請注意，由於框架是一個顯示選項，因此它充當 指示.

在本次會議中，您將發現：

1. 如何建立和調整框架
2. 如何在框架中定位內容
3. 如何移動、擴展和對齊框架內容
4. 如何建構響應式框架

如何建立和調整框架

為了建立一個框架，將一個支援框架的元素（例如，段，div塊等）引入工作區中 新增面板。隨後，選擇該元素，導航到 風格面板 > 佈局 > 展示，並選擇 框架.

您可以直接在中編輯框架 風格面板 或在框架編輯模式下。若要進入框架編輯模式，請按“扳手” 旁邊的圖標 專欄 和 行數 字段，或選擇工作區上的框架並點擊“網格編輯" 圖示.若要退出框架編輯模式，請按一下 完畢 在工作區疊加層上或按一下“關閉” 框架設定中的圖示。

合併列和行

若要在框架中包含新的列和行，請繼續執行 風格面板 > 佈局 > 展示 並利用“增加”按鈕對應的 列 和 列 字段。您也可以：

• 將數值插入列和行字段
• 進入框架編輯模式並點選“加” 中的圖標 風格面板 > 框架設定
• 啟動框架編輯模式並點選“加” 工作區上的圖標

複製並消除列和行

刪除列和行的方法有以下三種：

• 採用「減少” 按鈕 列 和 列 領域
• 存取框架編輯模式，將滑鼠懸停在列或行上 風格面板 > 框架設定，然後點選“垃圾" 圖示
• 進入框架編輯模式，按一下或以滑鼠右鍵按一下工作區上的列或行標題，然後選擇 刪除

在框架編輯模式下有兩種複製列和行的方法。您可以將滑鼠懸停在列或行上 風格面板 > 框架設定 並選擇“複製” 圖標，或右鍵單擊工作區上的列或行標題並選擇 複製.

重新組織列和列

您可以在框架編輯模式下重新排列列和行。將滑鼠懸停在要移動的行或列上，然後將左側出現的手把拖曳到所需位置。

修改列和行之間的間距

空格使您能夠指定列和行之間的距離，而無需添加邊距或填充。若要調整列和行之間的間隙大小，請前往 風格面板 > 佈局 > 差距 並輸入一個值。

預設情況下，列和行之間的邊距是同步的。這表示如果您修改列的間隙大小，行的間隙大小會自動適應相同的值。若要獨立變更列和行之間的間隙，請按一下“鎖”圖示來解鎖它們。

內幕提示： 若要快速擴大或縮小間隙尺寸，請滑動 差距 槓桿或按下 選項 （在 Mac 上）或 替代 （在 Windows 上）並將滑鼠向左或向右移動到列或行字段上。 

調整列和行的大小

您可以在框架編輯模式下透過選擇列或行標題並將其拖曳到工作區中所需的大小來修改網格列和行的比例。您也可以透過按一下行或列標題來指定列或行的自訂大小。

框架尺寸

在決定框架大小時，您可以使用標準單位（例如 px、em、rem），也可以使用 FR單位。 FR 單元象徵框架中可用空間的一小部分。您可以使用它來描繪類似於百分比或像素單位的行和列的長度，但是與固定百分比或像素單位不同，FR 單位會在考慮間隙的同時自動計算行和列空間。

您也可以設定 最小/最大 值以確保您的行和列不會減少到指定的最小值以下或超出規定的最大值。例如，如果您希望行的最小高度保持為 200 像素，則可以將最小值設為 200 像素，將最大值設為自動。隨後，該行將根據其中的內容進行擴展，並且永遠不會減少到 200 像素以下。

如何在框架中定位內容

您可以在框架內插入各種子元素（例如標題、圖像、div 區塊等）。預設情況下，每個新的框架子級將填入一個單獨的框架單元格，並從左到右佔據下一個可用單元格。如果一行中不再有空儲存格，則會建立一個新行來容納新的框架子層級。

改變框架內容的流動方向

您可以選擇變更框架子項的方向 風格面板 > 方向。在這裡，您可以選擇 水平的，由左至右排列子項，或者 垂直的，由上到下排列子項。

在網格中手動放置內容

若要在網格中手動定位內容，只需按住 轉移 鍵，同時將元素拖曳到網格中。您也可以將現有網格子項目的位置設定修改為手動。若要實現此目的，請選擇網格子項，導覽至 風格面板 > 網格子 > 位置，並將其更改為 手動的.

手動放置的網格子項將保留在其指定的網格單元中，而自動放置的網格子項目將透過移動到下一個單元格來調整以適應新的網格子項。

如何在網格單元中嵌套各種元素

您可以透過在網格子層級中嵌套元素來將多個元素插入到單一網格單元中。若要實現此目的，請先將結構元素（如 div 區塊）作為直接網格子元素新增至網格中。將結構元素新增為網格子元素後，您可以按住 命令 （在 Mac 上）或 控制 （在 Windows 上）並將元素拖曳到網格單元中。或者，您可以選擇結構元素並使用快速查找來新增額外元素。

複製網格中的內容

您有兩個選項來複製網格子項，以在多個網格單元格中重複使用相同的內容：

• 按住 選項 （在 Mac 上）或 替代 （在 Windows 上）並拖曳內容以複製並將其重新定位到新的網格單元
• 複製內容，然後選擇網格並貼上內容

管理網格中內容的移動、跨越和對齊

將內容放置在網格中後，您可以自訂該內容的設計。您可以透過將內容移動到不同的單元格來調整內容的位置，使其跨越多個單元格，甚至可以在網格內對齊內容。

重新定位網格子項

若要在網格內移動內容，請選擇網格子項目並將其拖曳到畫布上或視窗內的所需位置。 航海家.

排列網格子項的順序

您也可以透過選擇網格子項目並導航到 風格面板 > 網格子 > 命令.

對齊網格中的內容

若要變更所有網格子項目的對齊方式，請選擇該網格並轉到 風格面板 > 佈局 > 對齊。使用 對齊框 （3 x 3 網格）快速對齊網格內容。的控制 X 和 是 軸對應於內設定的值 對齊框。了解有關使用對齊框的更多資訊。

若要調整特定網格子項目的對齊方式，請選擇該網格子項目並導覽至 風格面板 > 網格子。從那裡，您可以在下面設定網格子項目的對齊方式或理由 對齊 和 證明合法.

擴展網格子項

若要將自動放置的網格子項目擴展到多個網格單元格，請選擇該網格子項，然後繼續執行 風格面板 > 網格子 > 位置，並指定數量 列 和 列 網格子項應該跨越。

若要拉伸手動定位的網格子項，請選擇網格子項，並訪問 風格面板 > 網格子 > 位置，並標示開始和結束 列 和 列 對於網格孩子。

安全網格兒童安置

負值使您能夠相對於網格末端定位網格子項目 - 它們指的是從右到左或從下到上的單元格。

在以下情況下，負網格子定位可能會很有用：

• 您希望保持導覽列在第一列和最後一列之間的位置，而不是在新增每個新列時重新擴展它
• 無論新增了多少行，您都希望將頁腳保留在網格的底行 - 將頁腳放置在第 -1/-1 行
• 您的目標是保持主要內容部分始終位於網格的中心，每側的列相等 - 設定「結束」值以符合「開始」值的負值（例如，3/-3）。這可以確保即使在較小的斷點上刪除列，子項目仍保持居中。

重置網格子配置

網格子設定特定於所選元素，並且不與類別一起儲存。更改的設定反映在粉紅色標籤中 風格面板 僅適用於目前斷點處的選取元素。這些設定向下級聯到較低的斷點，並以橙色標籤表示。如果您覆蓋較小斷點上繼承的（即橘色）設置，指示器將恢復為粉紅色。

若要消除任何已應用的網格子設置，請按一下該設定的粉紅色標籤，然後選擇 重置.

網格子項之間的重疊

手動定位的網格子項在同一儲存格內相交時會自動重疊。您可以透過在導航器中重新調整這些重疊元素或修改其定位和 z-index 設定來管理這些重疊元素的堆疊順序。

填滿未佔用的網格單元

當網格子項被跨越時，空白單元格可能會保留在網格中。若要自動用內容填滿這些儲存格，請導航到 風格面板 > 佈局 > 方向 並選擇“密集”圖示。

筆記： 啟動「密集」設定會嘗試將網格子項目容納在網格的空白單元格中。但是，這可能會帶來可訪問性問題，因為它僅影響項目的顯示，而不影響它們在頁面上的實際位置。

建立響應式網格設計

為了確保您的網格設計適應各種螢幕尺寸，您可以手動刪除較小斷點上的列，或啟用自動調整以自動生成列和行以適應較小的螢幕。

響應式自訂網格佈局

為了確保您的網格設計在所有裝置上都能回應，請根據需要調整列數以實現較小的斷點。

如果在較小的斷點上更改列不可行：

• 嘗試改變你的網格 方向 到 排
• 驗證這些列中沒有手動定位的網格子項
• 確認沒有子元素跨越這些列

實施自動調整

自動調整是網格的強大功能，它可以自動重複和換行列，以確保所有螢幕尺寸的反應能力，而無需對每個斷點進行調整。

若要啟動自動調整，請在網格中僅維護一列和一行。切換到網格編輯模式，按一下列標題，指定列的最小和最大尺寸，然後啟用 自動調整。將自動產生並重複其他列，以在網格內響應式地分發內容。