柔性盒

靈活盒模型，通常稱為 flexbox 或 flex，提供了一種在容器內排列元素的方法。 Flexbox 允許在單一維度（垂直或水平）上進行有效的佈局控制。它充當顯示屬性，使您能夠將 Flexbox 應用於各種元素。

本教學將涵蓋以下主題：

1. flex 中的父元素和子元素
2. 配置父級 Flex 屬性
3. 配置子 Flex 屬性

Flex 中的父元素與子元素

當在元素上使用 Flexbox 時，它通常會套用到整體容器來管理子元素的排列。使用 Flexbox 的容器元素稱為“Flex 父元素”，而 Flex 父元素的直接子元素稱為“Flex 子元素”。

您可以將任何包含其他元素的元素指定為 Flex 父元素。建立彈性父級：

1. 在畫布上選擇所需的元素（例如，部分、div 區塊）
2. 導航至 風格面板 > 佈局 > 展示
3. 點選 柔性

與替代顯示設定不同，在父元素上啟動 Flexbox 會影響其直接子元素的佈局。預設情況下，當在父元素上啟動 Flexbox 時，子元素會向左對齊並水平相鄰放置。可以在 Flex 父設定中對此行為進行進一步調整。

請注意： 設定為使用 Flexbox 的元素不會改變其直接子元素中子元素的佈局。

自訂父 Flex 屬性

將 Flexbox 套用至父元素後，Flex 父元素及其子元素都可以使用一系列版面選項：

• 方向
• 包裝
• 結盟
• 間距

設定或反轉方向

預設情況下，Flex 父級以從左到右的水平方向排列其內容。若要修改此方向，請選擇 Flex 父級並訪問 風格面板 > 佈局 > 方向，然後選擇其中之一 水平的 或者 垂直的 （每個表示為“箭"圖示).

您也可以靈活地反轉 Flex 父級中 Flex 子級的方向。選擇 Flex 父級，訪問 風格面板 > 佈局 > 方向，然後按一下 落下箭 揭開 包裝 選項。在這裡，您可以選擇 右到左 > 單排 或者 從下到上 > 單列。此操作會改變 Flex 子元素的排列，切換它們的位置，使得原始的第一個元素成為最後一個，第二個元素移動到倒數第二個位置，依此類推。反轉父項的方向對於從右到左的佈局或設計較小的顯示器時可能有益。

附加資訊： 當反轉 Flex 父級的方向時，document 結構中 Flex 子級的順序保持不變。視覺順序和 DOM 順序之間的這種差異可能會導致網站訪客感到困惑。

包裹或調整 Flex 子項的包裹行為

內 包裝 在選單中，您將遇到同時控制方向和環繞設定的選項。預設情況下，Flex 子級嘗試適應單行，可能會溢出父容器。為了解決這個問題，您可以為子級啟用換行。選擇 Flex 父級，訪問 風格面板 > 佈局 > 方向，然後按一下 下拉箭頭 訪問 裹 落下。

在這裡，您可以選擇各種 裹 根據您希望如何組織內容的替代方案：

• 左至右
• 右到左
• 從上到下
• 從下到上

左至右

您可以使用以下選項從左到右水平排列內容：

• 總結一下 — 超出父級寬度的 Flex 子級將會導向到下面的新行
• 包起來 — 超出父級寬度的 Flex 子級將被傳送到上面的新行

右到左

您可以使用以下選項從右到左水平排列內容：

• 單排 (不換行) — 反轉 Flex 子項的順序，而不將任何超出的元素換行到新行
• 總結一下 — 反轉 Flex 子項的順序，並將父項溢出的所有內容包裝到下面的新行
• 包起來 — 反轉 Flex 子項的順序，並將超出父項的任何內容包裝到上面的新行

從上到下

您可以使用以下選項從上到下垂直排列內容：

• 右邊繞 — 超出父級高度的內容將換行到右側的新列
• 向左繞行 — 超出父級高度的內容將換行到左側的新列

從下到上

您可以使用以下選項從下到上垂直排列內容：

• 單列 （無包裝）— 反轉 Flex 子項的順序，而不將它們包裝到新列
• 右邊繞 — 反轉 Flex 子項目的順序，並將超出父項高度的任何內容包裝到右側的新欄位中
• 向左繞行 — 反轉 Flex 子項目的順序，並將超出父項高度的任何內容包裝到左側的新列

對齊 Flex 子項

您可以在中對齊多行或多列的 Flex 子項 風格面板 > 佈局 > 結盟.

這 對齊框 （即 3 x 3 個網格）可讓您快速調整 Flex 祖先內的 Flex 後代。這 X 和 是 軸下拉式選單顯示您在對齊框中指定的值。了解有關對齊框的更多資訊。

請注意，某些替代方案不能只透過 對齊框，但您可以使用以下方式聯絡他們 X 和 是 軸下拉選單。每個下拉式選單中可用的對齊選項會有所不同，具體取決於 Flex 路線是水平還是垂直（即，是否對齊 Flex 後代的行或列）。

水平方向

當柔性路線定義為水平時， X 軸下拉選單提供以下對齊選項：

• 左邊 — Flex 後代與 Flex 祖先的左側對齊
• 中心 — 彎曲後代位於彎曲祖先內部的中心
• 正確的 — Flex 後代與 Flex 祖先的右側對齊
• 之間的空間 — Flex 後代與左右邊緣均勻間隔
• 周圍空間 — 柔性後代均勻分佈在其他行與邊緣之間

這 是 axis 下拉選單提供了以下選項用於對齊 Flex 後代的水平行：

• 頂部 — Flex 後代與 Flex 祖先的頂部對齊
• 中心 — 彎曲後代位於彎曲祖先內部的中心
• 底部 — Flex 後代與 Flex 祖先的底部對齊
• 拉緊 — 彎曲後代伸展以佔據空白的垂直空間
• 基線 — Flex 後代與其基線對齊，或與文字所在的不可見線對齊

垂直方向

當柔性路線設定為垂直時， X 軸下拉選單提供以下對齊選項：

• 左邊 — Flex 後代與 Flex 祖先的左側對齊
• 中心 — 彎曲後代位於彎曲祖先內部的中心
• 正確的 — Flex 後代與 Flex 祖先的右側對齊
• 拉緊 — 彎曲後代伸展以佔據空的水平空間
• 基線 — Flex 後代與其基線對齊，或與文字所在的不可見線對齊

專家提示： 垂直基線對齊可以增強垂直文字元素的易讀性，特別是在垂直文字方向常見或受青睞的語言或版面配置中。

這 是 axis 下拉選單提供了以下選項用於對齊 Flex 後代的垂直列：

• 頂部 — Flex 後代與 Flex 祖先的頂部對齊
• 中心 — 彎曲後代位於彎曲祖先內部的中心
• 底部 — Flex 後代與 Flex 祖先的底部對齊
• 之間的空間 — 柔性後代與頂部和底部邊緣均勻間隔
• 周圍空間 — 柔性後代均勻分佈在其他行與邊緣之間

添加柔性後代之間的間隙

間隙可讓您定義 Flex 子元素之間的空間，而無需添加邊距或填充。若要修改列和行之間的間隙大小，請選擇 Flex 祖先並導航到 風格面板 > 佈局 > 差距.

預設情況下，列和行之間的間隙是同步的。這表示如果調整列的間隙大小，行的間隙大小會自動對齊到相同的值。您可以點選「鎖”圖示來自動調整列和行之間的間隙。

專家提示： 若要快速增加或減少間隙大小，請拖曳 差距 滑桿或按住 選項 （在 Mac 上）或 替代 （在 Windows 上）並將滑鼠在列或行欄位上向左或向右滑動。

Flex後代調整

Flex 後代的預設排列是基於 Flex 祖先上指定的 Flex 佈局設定。不過，您可以為 Flex 後代取代這些設定：

• 尺寸
• 結盟
• 命令

修改 Flex 後代的大小

您可以透過選擇後代來微調 Flex 後代的大小，然後導航到 風格面板 > 柔性後代 > 漿紗。有 4 個尺寸選項：

• 如有必要，請縮小 Flex 後代（以避免溢出）
• 如果可行的話，擴大柔性後代
• 請勿收縮或擴展 Flex 後代
• 自訂增長和收縮行為

如果所有的 Flex 後代都固定到任一 如果可行的話擴大, 必要時縮小， 或者 不要縮小或擴大，調整大小後的任何剩餘空間將公平地分配給設定為 如果可行的話擴大.

必要時縮小

必要時縮小 可讓您根據 Flex 後代的寬度和高度屬性（或 Flex 後代中的內容，如果未指定寬度和高度）來調整其大小。當有額外的空間可用時，這會使柔性後代變得堅硬，但當空間不足時，它會使其收縮到最小尺寸。

如果可行的話擴大

如果可行的話擴大 如果有可用空間，則允許柔性後代擴展。這使得彎曲後代能夠吸收彎曲祖先內的任何多餘空間。

不要縮小或擴大

不要縮小或擴大 讓您可以根據 Flex 後代的寬度/高度屬性調整其大小，使其完全不靈活。即使在溢出情況下，柔性後代也被禁止擴展或收縮。

自訂增長和收縮行為

您也可以選擇完全 自訂增長和收縮行為 的後代元素。這決定了彎曲後代相對於彎曲祖先內的其他後代收縮或膨脹的程度。

這 生長 value 決定當分配父元素內的剩餘空間時，flex 子代可以相對於其他子代擴展的程度。如果該值定義為0，則不會超出必要範圍進行擴展。

這 收縮 value 決定了分配負空間時，flex 後代相對於其他後代可以收縮的程度。如果該值設定為0，即使在溢出情況下也不會收縮。

這根據 value 決定在 flex-grow 或 flex-shrink 影響之前元素的初始大小。您可以選擇將其指派給特定尺寸（例如，20%、250px 等）或自動。設定為「自動」時，Flex 子項的初始大小將由其寬度或高度（如果指定）或其內容決定。如果 根據 value 被分配了一個特定的尺寸，元素的內容或寬度/高度將被忽略，並且 Flex 子元素將按比例與相同 Flex 容器中的其他 Flex 子元素共享大小。

修改 Flex 子項的對齊方式

您可以透過選擇子項，然後導覽到 造型面板 > 彈性子 > 對齊和順序。有 6 種對齊方式可供選擇：

• 自動（預設）
• 頂部
• 中心
• 底部
• 拉緊
• 基線

提示： 您也可以利用自動邊距來對齊 Flex 子項目。

重新排序 Flex 子項

預設情況下，flex 子項會依照其在原始碼中出現的順序顯示（可在導覽器中查看順序）。在針對各種螢幕解析度調整設計元素時，重新排列 Flex 子項變得非常有用。

若要修改 Flex 子項的預設順序，請選擇該子項目並繼續執行 造型面板 > 彈性子 > 命令。有 6 種訂購選項可供選擇：

• 維持現有秩序 — 將 Flex 子項保留在原始位置
• 第一的 — 將 Flex 子項移至 Flex 容器的前面
• 最後的 — 將 Flex 子項移到 Flex 容器的後面
• 客製訂單 — 透過指定特定的順序值，可以自訂排列多個 Flex 子項

您可以為自訂排序指派一個唯一的數值，該數值指示 Flex 子項在 Flex 容器內的位置。共享相同自訂訂單值的 Flex 子項將根據其原始位置進行排列。

使用自訂訂購時，避免使用 第一的 或者 最後的 指定第一個或最後一個子元素。 第一的 將為 flex 子項分配 -1 的順序，而 最後的 將分配順序 1。 最後的。任何小於 -1 的值都會將 flex 子元素定位在任何設定為 第一的.

提示： 當變更 Flex 子項的順序時，請記住它們的 document 順序保持不變。這表明元素的視覺序列和 DOM 結構可能不對齊，可能會導致網站訪客感到困惑。