FlexBox

注意： FlexBox 目前為實驗性 API，未來可能會變更。如有任何問題，請透過 Issue Tracker 回報。

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

FlexBox 的功能包括：

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

使用 FlexBox 的時機

FlexBox 通常用於在整體螢幕版面配置內顯示少量項目。就整體畫面版面配置而言，Grid 通常是較好的選擇。FlexBox 不支援延遲載入項目。如要顯示大量項目，請使用延遲載入清單和格線。如要包裝商品，請使用 FlexBox，而非 FlowRow 和 FlowColumn。

術語與概念

重點提示： FlexBox 受到 CSS 彈性方塊版面配置規格的影響很大，概念、術語和行為幾乎完全相同。如果您熟悉 display: flex，會發現 FlexBox 的屬性和行為幾乎相同。

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

圖 1. FlexBox 方向為 Row 時的軸和大小。

圖 2. FlexBox 方向為 Column 時的軸和大小。

套用屬性

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

• 如要使用 FlexBox(config) 存取 FlexBox 容器，
• 使用 Modifier.flex 將項目新增至 FlexBox 內

容器屬性 (config)	項目屬性 (Modifier.flex)
direction - 項目版面配置方向 wrap：是否要在主要大小不足時包裝項目 justifyContent - 如何沿著主軸分配項目 alignItems - 如何沿著交錯軸對齊項目 alignContent - 如何在有多行時，從交叉大小分配額外空間 rowGap / columnGap：在項目和行之間新增空格 如要進一步瞭解這些屬性，請參閱「設定容器行為」。	basis - 項目在分配 main size 的額外空間前的大小 grow - 這項商品應獲得的額外空間比例 (以主要尺寸為準) shrink - the share of space deficit from the main size that this item should receive alignSelf - 如何將交叉大小的額外空間分配給這個項目，會覆寫 alignItems order - 控制版面配置順序 如要進一步瞭解這些屬性，請參閱「設定項目行為」。

瞭解 FlexBox 版面配置演算法

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

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

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

2. 排序子項：如有子項的 order 值，請依該值排序。

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

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

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

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