FlexBox

FlexBox 是以單一方向排列項目的容器。它可以調整大小、換行、對齊及分配項目之間的空間，以最佳方式填滿可用空間。這種版面配置適用於不同大小的項目，以及在可用空間變更時調整項目大小。

FlexBox 的功能包括：

• 控制項目如何放大和縮小，以填滿可用空間
• 空間不足時，將項目換行或換欄
• 使用便利的預設設定，在項目之間分配額外空間

FlexBox 的使用時機

FlexBox 通常用於在整體螢幕版面配置「內」顯示少量項目。如果是整體螢幕版面配置，Grid 通常是較佳選擇。FlexBox 不支援延遲載入項目。如要顯示大量項目，請使用 Lazy 清單和格線。如需納入項目，請使用 FlexBox，而非 FlowRow 和 FlowColumn。

術語與概念

FlexBox 會以水平或垂直線排列項目。這些線條的方向會建立主軸。與主軸呈 90 度的是交錯軸。FlexBox 沿著主軸的長度稱為「主要大小」。對應的交錯軸長度稱為「交錯大小」。這些大小和軸是 FlexBox 行為的基礎。

套用屬性

您可以透過兩種方式套用 FlexBox 屬性：

• 使用 FlexBox(config) 傳送至 FlexBox 容器
• 使用 Modifier.flex 導覽至 FlexBox 內的項目

容器屬性 (config)	項目屬性 (Modifier.flex)
direction：項目版面配置方向 wrap：主要大小不足時，是否要換行顯示項目 justifyContent：如何沿著主軸分配項目 alignItems：如何沿著交錯軸對齊項目 alignContent：有多行時，如何從交叉軸大小分配額外空間 rowGap / columnGap：在項目和行之間新增空格 如要進一步瞭解這些屬性，請參閱「設定容器行為」。	basis：項目在分配主要大小的額外空間前的大小 grow：這個項目應從主要大小中獲得的額外空間比例 shrink：此項目應從主要大小中獲得的空間不足份額 alignSelf：如何將交叉軸大小中的額外空間分配給這個項目，會覆寫 alignItems order：控制版面配置順序 如要進一步瞭解這些屬性，請參閱「設定項目行為」。

瞭解 FlexBox 版面配置演算法

FlexBox 最強大的功能之一，就是能調整子項大小，以最適合可用空間。瞭解 FlexBox 的運作方式，有助於設定 FlexBox 屬性，針對所有可能的大小最佳化 UI。

FlexBox 的版面配置演算法運作方式如下：

1. 計算子項基本大小：使用子項的 basis 值，計算其在主軸上的初始大小，然後再分配任何額外空間。

2. 排序子項：依子項的 order 值 (如有) 排序。

3. 建構行：針對每個子項，檢查其初始大小加上 gap 是否能容納在目前行的剩餘空間中。如果是，請將這個子項放入該行。如果沒有，請在啟用換行時將項目放在新行，或將項目放在目前會溢出的行 (項目會部分遮蓋容器邊緣)。

4. 對齊或調整主軸中的項目：針對每一行，透過調整大小或對齊項目，將額外空間分配給項目或項目之間。

5. 對齊或調整交叉軸中的項目：針對每一行，透過展開或對齊項目和行，將額外空間分配給項目和行，或分配到項目和行之間。

您已熟悉 FlexBox 概念，請參閱「開始使用」建立基本 FlexBox。