使用 Flexbox 進行佈局

組件可以使用 Flexbox 演算法指定其子組件的佈局。Flexbox 的設計旨在為不同螢幕尺寸提供一致的佈局。

您通常會結合使用 flexDirection、alignItems 和 justifyContent 來實現正確的佈局。

注意

Flexbox 在 React Native 中的運作方式與網頁上的 CSS 相同，但有一些例外。預設值有所不同，其中 flexDirection 預設為 column 而非 row，alignContent 預設為 flex-start 而非 stretch，flexShrink 預設為 0 而非 1，而 flex 參數僅支援單一數字。

Flex

flex 將定義您的項目如何在主軸上「填滿」可用空間。空間將根據每個元素的 flex 屬性進行劃分。

在以下範例中，紅色、橘色和綠色視圖都是容器視圖中的子組件，該容器視圖已設定 flex: 1。紅色視圖使用 flex: 1，橘色視圖使用 flex: 2，綠色視圖使用 flex: 3。1+2+3 = 6，這表示紅色視圖將獲得 1/6 的空間，橘色獲得 2/6 的空間，綠色獲得 3/6 的空間。

Flex 方向

flexDirection 控制節點子組件的佈局方向。這也稱為主軸。交叉軸是垂直於主軸的軸，或是包裝線佈局所在的軸。

• column (預設值) 從上到下對齊子組件。如果啟用換行，則下一行將從容器頂部第一個項目的右側開始。

• row 從左到右對齊子組件。如果啟用換行，則下一行將從容器左側第一個項目的下方開始。

• column-reverse 從下到上對齊子組件。如果啟用換行，則下一行將從容器底部第一個項目的右側開始。

• row-reverse 從右到左對齊子組件。如果啟用換行，則下一行將從容器右側第一個項目的下方開始。

您可以在此處了解更多資訊。

TypeScript

JavaScript

佈局方向

佈局 direction 指定階層中子組件和文字的佈局方向。佈局方向也會影響 start 和 end 指的是哪個邊緣。依預設，React Native 使用 LTR 佈局方向進行佈局。在此模式下，start 指的是左側，end 指的是右側。

• LTR (預設值) 文字和子組件從左到右佈局。套用至元素開頭的邊距和內距會套用在左側。

• RTL 文字和子組件從右到左佈局。套用至元素開頭的邊距和內距會套用在右側。

TypeScript

JavaScript

對齊內容

justifyContent 描述如何在容器主軸內對齊子組件。例如，您可以將此屬性用於在 flexDirection 設定為 row 的容器中水平置中子組件，或在 flexDirection 設定為 column 的容器中垂直置中子組件。

• flex-start (預設值) 將容器的子組件對齊到容器主軸的起點。

• flex-end 將容器的子組件對齊到容器主軸的終點。

• center 將容器的子組件對齊到容器主軸的中心。

• space-between 在容器的主軸上均勻間隔子組件，並在子組件之間分配剩餘空間。

• space-around 在容器的主軸上均勻間隔子組件，並在子組件周圍分配剩餘空間。與 space-between 相比，使用 space-around 將導致空間分配到第一個子組件的開頭和最後一個子組件的結尾。

• space-evenly 在對齊容器內沿主軸均勻分配子組件。每對相鄰項目之間、主軸起點邊緣和第一個項目之間，以及主軸終點邊緣和最後一個項目之間的間距完全相同。

您可以在此處了解更多資訊。

TypeScript

JavaScript

對齊項目

alignItems 描述如何在容器的交叉軸上對齊子組件。它與 justifyContent 非常相似，但 alignItems 是應用於交叉軸，而不是主軸。

• stretch (預設值) 拉伸容器的子組件以符合容器交叉軸的 height。

• flex-start 將容器的子組件對齊到容器交叉軸的起點。

• flex-end 將容器的子組件對齊到容器交叉軸的終點。

• center 將容器的子組件對齊到容器交叉軸的中心。

• baseline 沿著共同的基準線對齊容器的子組件。可以將個別子組件設定為其父組件的參考基準線。

資訊

為了讓 stretch 生效，子組件在次軸上不得具有固定尺寸。在以下範例中，設定 alignItems: stretch 不會產生任何作用，直到從子組件中移除 width: 50 為止。

您可以在此處了解更多資訊。

TypeScript

JavaScript

對齊自身

alignSelf 具有與 alignItems 相同的選項和效果，但您可以將此屬性套用至單一子組件，以變更其在其父組件內的對齊方式，而不是影響容器內的子組件。alignSelf 會覆寫父組件使用 alignItems 設定的任何選項。

TypeScript

JavaScript

對齊內容

alignContent 定義沿交叉軸的線條分佈。這僅在項目使用 flexWrap 包裝到多行時才有效。

• flex-start (預設值) 將包裝線對齊到容器交叉軸的起點。

• flex-end 將包裝線對齊到容器交叉軸的終點。

• stretch (在網頁上使用 Yoga 時的預設值) 拉伸包裝線以符合容器交叉軸的高度。

• center 將包裝線對齊到容器交叉軸的中心。

• space-between 在容器的交叉軸上均勻間隔包裝線，並在線條之間分配剩餘空間。

• space-around 在容器的交叉軸上均勻間隔包裝線，並在線條周圍分配剩餘空間。容器的每一端都具有一半大小的空間，相較於項目之間的空間。

• space-evenly 在容器的交叉軸上均勻間隔包裝線，並在線條周圍分配剩餘空間。每個空間的大小都相同。

您可以在此處了解更多資訊。

TypeScript

JavaScript

Flex 包裝

flexWrap 屬性設定在容器上，它控制當子組件溢出容器沿主軸的尺寸時會發生什麼情況。依預設，子組件會強制放入單行（這可能會縮小元素）。如果允許換行，則項目會在需要時沿主軸包裝成多行。

當包裝線條時，可以使用 alignContent 來指定線條在容器中的放置方式。在此處了解更多資訊。

TypeScript

JavaScript

Flex 基準、Grow 和 Shrink

• flexBasis 是一種與軸無關的方式，用於提供項目沿主軸的預設尺寸。設定子組件的 flexBasis 類似於在父組件是 flexDirection: row 的容器時設定該子組件的 width，或在父組件是 flexDirection: column 的容器時設定該子組件的 height。項目的 flexBasis 是該項目的預設尺寸，即在執行任何 flexGrow 和 flexShrink 計算之前的項目尺寸。

• flexGrow 描述容器內沿主軸的空間應如何在子組件之間分配。在佈局其子組件之後，容器將根據其子組件指定的 flex grow 值分配任何剩餘空間。

  flexGrow 接受任何浮點值 >= 0，預設值為 0。容器將根據子組件的 flexGrow 值加權，在其子組件之間分配任何剩餘空間。

• flexShrink 描述在子組件的總尺寸溢出容器在主軸上的尺寸的情況下，如何沿主軸縮小子組件。flexShrink 與 flexGrow 非常相似，如果將任何溢出尺寸視為負剩餘空間，則可以以相同的方式考慮它。這兩個屬性也可以很好地協同工作，允許子組件根據需要成長和縮小。

  flexShrink 接受任何浮點值 >= 0，預設值為 0（在網頁上，預設值為 1）。容器將根據子組件的 flexShrink 值加權，縮小子組件。

您可以在此處了解更多資訊。

TypeScript

JavaScript

行間距、列間距和間距

• rowGap 設定元素行之間的間隙（溝槽）大小。

• columnGap 設定元素列之間的間隙（溝槽）大小。

• gap 設定行和列之間的間隙（溝槽）大小。它是 rowGap 和 columnGap 的簡寫。

您可以將 flexWrap 和 alignContent 與 gap 一起使用，以在項目之間新增一致的間距。

TypeScript

JavaScript

寬度和高度

width 屬性指定元素內容區域的寬度。同樣地，height 屬性指定元素內容區域的高度。

width 和 height 都可以採用以下值

• auto (預設值) React Native 會根據元素的內容（無論是其他子組件、文字或圖片）計算元素的寬度/高度。

• pixels 以絕對像素定義寬度/高度。根據組件上設定的其他樣式，這可能是或可能不是節點的最終尺寸。

• percentage 以其父組件寬度或高度的百分比定義寬度或高度。

TypeScript

JavaScript

位置

元素 position 類型定義其相對於自身、其父組件或其包含區塊的定位方式。

• relative (預設值) 依預設，元素是相對定位的。這表示元素會根據佈局的正常流程進行定位，然後根據 top、right、bottom 和 left 的值相對於該位置進行偏移。偏移不會影響任何同層級或父組件元素的位置。

• absolute 當絕對定位時，元素不會參與正常的佈局流程。而是獨立於其同層級進行佈局。位置是根據 top、right、bottom 和 left 值確定的。這些值將相對於其包含區塊定位元素。

• static 當靜態定位時，元素會根據正常的佈局流程進行定位，並將忽略 top、right、bottom 和 left 值。此 position 也會導致元素不會形成絕對後代的包含區塊，除非存在其他更重要的樣式屬性（例如 transform）。這允許將 absolute 元素定位到非其父組件的項目。請注意，static 僅適用於全新架構。

TypeScript

JavaScript

包含區塊

元素的包含區塊是控制其位置和尺寸的祖先元素。React Native 中包含區塊的運作方式與它們在網頁上的運作方式非常相似，但由於缺少某些網頁功能，因此進行了一些簡化。

絕對定位元素的 top、right、bottom 和 left 值將相對於其包含區塊。

套用至絕對定位元素的百分比長度（例如：width: '50%' 或 padding: '10%'）將相對於其包含區塊的尺寸進行計算。例如，如果包含區塊寬 100 點，則絕對定位元素上的 width: 50% 將使其寬 50 點。

以下清單將協助您判斷任何給定元素的包含區塊

• 如果該元素的 position 類型為 relative 或 static，則其包含區塊為其父組件。
• 如果該元素的 position 類型為 absolute，則其包含區塊為最近的祖先，其中以下其中一項為真
  • 它具有非 static 的 position 類型
  • 它具有 transform

深入了解

查看互動式 yoga playground，您可以使用它來更深入了解 flexbox。

我們已涵蓋基礎知識，但您可能還需要許多其他樣式用於佈局。控制佈局的完整屬性清單記錄在此處。

此外，您可以查看 Wix Engineers 中的一些範例。