FlexBox

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

透過 FlexBox，您可以：

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

使用 FlexBox 的時機

FlexBox 通常用於在整體螢幕版面配置內顯示少量項目。如要瞭解整體螢幕版面配置，通常較適合使用 Grid。FlexBox 不支援延遲載入項目。如要顯示大量項目，請使用延遲載入清單和格線。如需包裝項目，請使用 FlexBox，而非 FlowRow 和 FlowColumn。

術語與概念

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

套用屬性

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

• 使用 FlexBox(config) 將檔案複製到 FlexBox 容器
• 使用 Modifier.flex 將項目新增至 FlexBox 內

容器屬性 (config)	項目屬性 (Modifier.flex)
direction - 項目版面配置方向 wrap - 項目是否要換行 (如果主要大小不足) justifyContent：如何沿著主軸分配項目 alignItems - 如何沿著交錯軸對齊項目 alignContent - how to distribute extra space from the cross size when there are multiple lines rowGap / columnGap - 在項目和行之間加入空格 如要進一步瞭解這些屬性，請參閱「設定容器行為」。	basis - 項目在分配主要大小的額外空間前的大小 grow - 這項商品應獲得的額外空間比例 (以主要大小為準) shrink - 該項目應獲得的主要尺寸空間不足比例 alignSelf - 如何將交叉大小的額外空間分配給這個項目，會覆寫 alignItems order - 控制版面配置順序 如要進一步瞭解這些屬性，請參閱「設定項目行為」。

瞭解 FlexBox 版面配置演算法

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

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

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

2. 排序子項：如果子項有 order 值，則依該值排序。

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

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

5. 對齊或調整交叉軸上的項目大小：針對每一行，將額外空間分配給項目和行，或分配給項目和行之間，方法是延展或對齊項目和行。

您已熟悉 FlexBox 概念，請參閱「開始使用」一文，瞭解如何建立基本 FlexBox。