調整設定

配置設定管理父容器內子組件的排列行為。透過利用各種調整設置，您可以在一維或二維中調整佈局，並管理元件相對於彼此的顯示方式。

在本教程中，您將熟悉中的每個自訂設置 風格面板 > 佈局 部分：

1. 初級
2. 鬆緊帶
3. 網格化
4. 行內元素
5. 內聯柔性
6. 網格內聯
7. 內聯合成
8. 消失

初級

初級 是大多數組件的預設調整設定。基本父元素中的每個子元件都從新行開始，並佔據其父元素的完整寬度，除非指定了自訂寬度。

鬆緊帶

柔性盒 在一個維度上（水平或垂直）組織直接子組件。您可以個性化直接子元素堆疊的方向、它們在父元素中的排列和對齊方式、它們之間是否有間隙以及它們是否過渡到下一行。

建立彈性父元素後，該父元素的所有直接子元素都會成為彈性子元素。您可以在彈性子項設定中取代彈性子項調整設定（例如，大小、排列、順序）。

網格化

網格設計 在二維（水平和垂直）的列和行中組織直接子級。您可以自訂直接子層級在網格內的定位、對齊和分配方式，並在列和行之間引入空格。您可以在網格子項設定中修改網格子項目調整設定（即位置、跨距、對齊方式、兩端對齊和順序）。

在確定網格比例時，您可以使用 FR 單元（它在適應空間的同時自動計算行和列空間）來建立流體網格。

行內元素

中的子組件 行內元素 父級彼此相鄰排列，其寬度是基於其中的內容。當內容到達父元素的邊界時，子元素會換行。

提醒： 當使用內嵌元素時，HTML 中的空白會轉變為網站設計中的可見空間。了解如何處理內聯元素組件之間的空格。

內聯柔性

內聯柔性 將元素呈現為內聯級靈活容器。 Flex 內聯父元件中的子元件會根據 Flexbox 模型進行對齊。本質上，Flex 容器轉換為內聯元素，而其子元素則佈局為 Flex 項目。

網格內聯

網格內聯 將元素展示為內聯級網格容器。網格內聯父級中的子組件會根據網格模型進行排列。與 flex inline 相比，grid inline 將父元素的內聯級行為與其子元素的網格佈局的靈活性結合起來。

內聯合成

內聯合成 是元素內任何文字內容的預設調整設定。您可以透過調整內聯元素的邊距和填滿來修改內聯元素的佈局，但無法修改其寬度或高度。

消失

您可以僱用 消失 調整設定以完全隱藏元素。配置為消失的元素不會被瀏覽器顯示，這有利於改變內容在行動裝置上的顯示方式。設定為消失的元素也被排除在可訪問性結構之外，使得螢幕閱讀器等輔助技術無法存取該元素及其子元素。