FlexLayout (彈性佈局)

.NET MAUI FlexLayout。

.NET 多平台應用程式介面（.NET MAUI） FlexLayout 是一種佈局，可以將子節點橫向和縱向排列成堆疊，若子節點太多無法放入單一列或一欄，也能包裹。此外，FlexLayout 還能控制方向和對齊，並適應不同的螢幕尺寸。 FlexLayout 基於層疊樣式表（CSS）彈性盒式佈局模組。

類別 FlexLayout 會定義下列屬性：

AlignContent，類型FlexAlignContent，它決定了佈局引擎如何分配在多行上排列的子節點之間及周圍的空間。這個屬性預設值為 Stretch。欲了解更多資訊，請參閱 AlignContent。
AlignItems，種類為 FlexAlignItems，用於指出佈局引擎將如何沿著橫軸分配子項目之間及周圍的空間。這個屬性預設值為 Stretch。欲了解更多資訊，請參閱 AlignItems。
Direction，是型別為 FlexDirection，定義子節點的方向與主軸。這個屬性預設值為 Row。欲了解更多資訊，請參閱方向。
JustifyContent，其類型為 FlexJustify，指定了如何沿著主軸分配空間於子節點之間和四周。這個屬性預設值為 Start。欲了解更多資訊，請參閱 JustifyContent。
Position，屬於FlexPosition類型，決定了子節點的位置是相對於彼此還是使用固定值。這個屬性預設值為 Relative。
Wrap，類型為 FlexWrap，用於控制子節點是排列成單行還是多行。這個屬性預設值為 NoWrap。更多資訊請參見 Wrap。
AlignSelf，型別為 FlexAlignSelf，這是一個附加屬性，指示佈局引擎如何在橫軸上分配特定子節點及其周圍的空間。這個屬性預設值為 Auto。欲了解更多資訊，請參閱 AlignSelf。
Basis，其型別為 FlexBasis，這是一個附加屬性，定義子節點的初始主大小，然後根據其他屬性值分配空閒空間。這個屬性預設值為 Auto。欲了解更多資訊，請參閱 Basis。
Grow，型別為 float，為附加屬性，指定子節點在主軸上應使用多少可用空間。此屬性的預設值為 0.0。驗證回撥確保當屬性被設定時，其值大於或等於 0。欲了解更多資訊，請參閱「成長」。
Order，類型為 int，這是一個附加性質，決定子節點應在容器中其他子節點之前或之後進行佈局。此屬性的預設值為 0。欲了解更多資訊，請參閱命令。
Shrink，型別 float為，這是一個附加屬性，控制子節點如何縮小，使所有子節點都能放入容器內。此屬性的預設值為 1.0。驗證回撥確保當屬性被設定時，其值大於或等於 0。欲了解更多資訊，請參閱 Shrink。

這些屬性由 BindableProperty 物件支撐，意味著這些屬性可以作為資料綁定的目標並進行樣式化。

這很重要

當FlexLayout中的物品排列成一列時，FlexLayout具有垂直的主軸和水平的橫軸。當 a FlexLayout 中的物品排成一列時，主FlexLayout軸為水平，橫軸為垂直。

FlexLayout及其子節點可部分使用層疊樣式表（CSS）進行樣式設定。欲了解更多資訊，請參閱使用層疊樣式表（CSS）來樣式化應用程式。

方向與對齊

Direction、Wrap、JustifyContent、AlignItems、AlignContent 及Position 這些可綁定屬性可以在FlexLayout上設定，以控制所有子物件的方向與對齊。

方向

Direction屬性類型為 FlexDirection，定義子節點的方向與主軸。 FlexDirection 列舉定義了下列成員：

Column，表示子節點應該垂直堆疊。
ColumnReverse （或在 XAML 中稱為「column-reverse」），表示子項目應該以垂直反向的順序堆疊。
Row，表示孩子應該水平堆疊。此為 Direction 屬性的預設值。
RowReverse （或在 XAML 中稱為「反向列」），表示子節點應以逆向順序水平堆疊。

當屬性 Direction 設定為 Column、或 ColumnReverse時，主軸將為 y 軸，物品會垂直堆疊。當屬性 Direction 設定為 Row或 RowReverse時，主軸將為 x 軸，子項則會水平堆疊。

備註

在 XAML 中，你可以用列舉成員名稱（小寫、大寫或混合大小寫）來指定這個屬性的值，或者你也可以使用括號內的兩個額外字串。

包裝

Wrap 屬性，其類型為 FlexWrap，用於控制子節點是單行排列還是多行排列。 FlexWrap 列舉定義了下列成員：

NoWrap，表示子元素排成單行。此為 Wrap 屬性的預設值。
Wrap，表示物品會在需要時分多行排列。
Reverse （或在 XAML 中稱為「wrap-reverse」），表示項目會在需要時以多行方式排列，且順序相反。

當屬性Wrap被設定為NoWrap且主軸受限，主軸不夠寬或高以容納所有子項目時，FlexLayout會嘗試將這些項目縮小。你可以用附加的 Shrink 可綁定特性來控制兒童的縮小因子。

當屬性 Wrap 設定為 Wrap 或 WrapReverse時， AlignContent 該屬性可用來指定線路的分布方式。

正當化內容

JustifyContent 屬性為 FlexJustify 類型，指定了空間在主軸上如何在子節點之間及周圍分配。 FlexJustify 列舉定義了下列成員：

Start （或在 XAML 中稱為「flex-start」），表示子節點應該在起始位置對齊。此為 JustifyContent 屬性的預設值。
Center，表示子項目應該圍繞中心對齊。
End（或在 XAML 中稱為「flex-end」），表示子節點應在末端對齊。
SpaceBetween （或在 XAML 中稱為「中間空間」），這表示子節點應該均勻分布，第一個子節點在開始，最後一個子節點在最後。
SpaceAround （或在 XAML 中稱為「環繞空間」），表示子節點應該均勻分布，第一個和最後一個子節點的空間為半大小。
SpaceEvenly，這表示子節點應該均勻分布，並且所有子節點應有相等的周圍空間。

對齊元素

AlignItems屬性的類型為FlexAlignItems，表示佈局引擎將如何沿著橫軸分配子元件之間及周圍的空間。 FlexAlignItems 列舉定義了下列成員：

Stretch，這表示孩子應該被伸展開來。這是該房產的 AlignItems 預設價值。
Center，表示子節點應該以中心為對齊點排列。
Start （或在 XAML 中稱為「flex-start」），表示子節點應該在起始位置對齊。
End （或在 XAML 中稱為「flex-end」），表示子節點應該在結尾對齊。

這是兩個表示子節點在橫軸上如何對齊的屬性之一。在每排中，兒童會被拉伸或對齊在每個項目的起始、中心或結尾。

對於任何單一的子元件，可以使用 AlignSelf 附加的可綁定屬性來覆寫 AlignItems 設定。

AlignContent（對齊內容）

AlignContent屬性（類型為 FlexAlignContent）決定佈局引擎如何在多行中分配子項之間及周圍的空間。 FlexAlignContent 列舉定義了下列成員：

Stretch，這表示孩子應該被伸展開來。這是該房產的 AlignContent 預設價值。
Center，表示子節點應該圍繞中心排列。
Start （或在 XAML 中稱為「flex-start」），表示子節點應該在起始位置對齊。
End （或在 XAML 中稱為「flex-end」），表示子節點應該在結尾對齊。
SpaceBetween （或在 XAML 中稱為「中間空間」），這表示子節點應該均勻分布，第一個子節點在開始，最後一個子節點在最後。
SpaceAround （或在 XAML 中稱為「環繞空間」），表示子節點應該均勻分布，第一個和最後一個子節點的空間為半大小。
SpaceEvenly，這表示子節點應該均勻分布，所有子節點周圍空間相等。

當只有一列或一行時，該 AlignContent 屬性沒有影響。

兒童對齊與尺寸

AlignSelf、Order、Basis、Grow、Shrink 的附加可綁定屬性可以設定在 FlexLayout 的子節點上，以控制子節點的方向、對齊方式和尺寸。

對齊自我

AlignSelf屬性類型為 FlexAlignSelf，指示佈局引擎如何沿著交叉軸在特定子節點之間及周圍分配空間。 FlexAlignSelf 列舉定義了下列成員：

Auto，表示子節點應依其父節點的對齊值進行對齊。此為 AlignSelf 屬性的預設值。
Stretch，表示孩子應該被伸展。
Center，表示子節點應該圍繞中心排列。
Start （或在 XAML 中稱為「彈性起始」），表示子節點應該在起始位置對齊。
End（又稱為在 XAML 中的「flex-end」），表示子項目應該在末端對齊。

對於 FlexLayout 的任何子節點，此屬性會覆蓋 FlexLayout 上設置的 AlignItems 屬性。預設設定 Auto 的意思是使用該 AlignItems 設定。

在 XAML 中，這個屬性設定在子節點上，且不參考其 FlexLayout 父節點：

<Label FlexLayout.AlignSelf="Center"
       ... />

對等的 C# 程式代碼為：

Label label = new Label();
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

訂單

Order屬性，屬於int類型，允許您更改FlexLayout子元素的排列順序。此屬性的預設值為 0。

通常，子節點會依照它們加入 FlexLayout的順序排列。然而，可以通過將此屬性設置為一個或多個子節點的非零整數值來覆寫該順序。 FlexLayout然後根據它的子元素的Order屬性值進行排列。具有相同 Order 屬性值的子節點依加入的 FlexLayout順序排列。

依據

Basis 屬性，類型為 FlexBasis，定義了子節點在主軸上的初始大小，隨後根據其他屬性值分配空閒空間。此性質所指定的值為父節點主軸 FlexLayout上的大小。因此，當子節點排成行時，此特性表示子節點的寬度，或當子節點排成列時表示子節點的高度。此性質稱為基底，因為它指定了所有後續佈局的基底大小。

該 FlexBasis 結構體是一種允許以裝置無關單位或作為 FlexLayout 大小百分比來指定大小的結構。屬性的 Basis 預設值為 Auto，表示子節點請求的寬度或高度會被使用。

在 XAML 中，你可以用一個數字來表示裝置無關單位的尺寸：

<Label FlexLayout.Basis="40"
       ... />

對等的 C# 程式代碼為：

FlexLayout.SetBasis(label, 40);

在 XAML 中，百分比可以如下指定：

<Label FlexLayout.Basis="25%"
       ... />

對等的 C# 程式代碼為：

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

建 FlexBasis 構子的第一個參數是一個分數 float 值，必須在 0 到 1 之間。第二個論點表示規模是相對的，而非絕對的。

成長

Grow 屬性，其型別為 float，用於指定子節點在主軸上應占用的可用空間量。此屬性的預設值為 0.0，且其值必須大於或等於 0。

Grow屬性用於當Wrap屬性設定為NoWrap時，如果一行子節點的總寬度小於FlexLayout的寬度，或一列子節點的高度低於FlexLayout的高度。該 Grow 財產指示如何分配剩餘空間給子女。如果一個子節點被賦予正的 Grow 值，那麼該子節點將取用所有剩餘空間。另外，剩餘的空間也可以分配給兩個或以上的孩子。

縮小

Shrink屬性類型為float，控制子元件如何縮小，使所有子元件都能放入容器內。此屬性的預設值為 1.0，且其值必須大於或等於 0。

Shrink屬性會在Wrap被設定為NoWrap時使用，當子節點行的總寬度大於FlexLayout的寬度，或單一列的子節點總高度大於FlexLayout的高度。通常他們 FlexLayout 會透過限制這些孩子尺寸來展示這些孩子。該 Shrink 性質可指示哪些兒童在全尺寸展示時享有優先權。

小提示

Grow和 Shrink 值都可以設定，以適應彙總子節點大小有時小於或大於 FlexLayout的情況。

Examples

以下範例展示了的 FlexLayout常見用法。

Stack

A FlexLayout 可以替代StackLayout

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.SimpleStackPage"
             Title="Simple Stack">    
    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">        
        <Label Text="FlexLayout in Action"
               FontSize="18" />
        <Image Source="dotnet_bot_branded.png"
               HeightRequest="300" />
        <Button Text="Do-Nothing Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

在此範例中， Direction 屬性設為 Column，導致的 FlexLayout 子節點排列在同一欄中。 AlignItems屬性設為 Center，使每個子節點在水平居中。 JustifyContent屬性設定為SpaceEvenly，將所有剩餘的垂直空間平均分配給所有子節點，位於第一個子節點之上，最後一個子節點下方：

垂直導向的 .NET MAUI FlexLayout。

備註

附加屬性AlignSelf可用來覆蓋特定子項的屬性AlignItems。

包裝物品

A FlexLayout 可以將其子節點包裹成額外的列或行。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>
        ...
    </Grid>
</ContentPage>

在此範例中， Direction 的 FlexLayout 屬性未設定，因此預設 Row為，意即子節點排列成列，主軸為水平。 Wrap屬性設為 Wrap，若子節點太多無法放入當前列，則會換行到下一列。 JustifyContent屬性設定為 SpaceAround ，分配主軸上所有剩餘空間，使每個子節點周圍空間量相同：

橫向包裝 .NET MAUI FlexLayout。

這個範例的後置程式碼檔會取得一組照片並將其新增至 FlexLayout。

此外，FlexLayout 是 ScrollView 的子節點。因此，如果頁面上有太多列無法放入，則 ScrollView 的預設屬性為 OrientationVertical，並允許垂直捲動。

頁面配置

網頁設計中有一種標準版面稱為聖杯，因為它非常理想，但往往難以完美實現。版面設計由頁面頂端的標題和底部的頁尾組成，兩者皆延伸至頁面的全寬。頁面中央是主要內容，但通常在內容左側有欄狀選單，右側則有補充資訊（有時稱為旁白區）。此佈局可用 FlexLayout. 實現。

以下範例展示了使用 FlexLayout 巢狀於另一個配置中的實現範例：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="18"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />

        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="18"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />

            <!-- Navigation items-->
            <BoxView FlexLayout.Basis="50"
                     FlexLayout.Order="-1"
                     Color="Blue" />

            <!-- Aside items -->
            <BoxView FlexLayout.Basis="50"
                     Color="Green" />

        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="18"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

導航和側邊區域以左、右兩側的BoxView方式渲染顯示。第一個 FlexLayout 主軸為垂直，包含三個子節點排列成一欄。這些分別是頁頭、頁面正文和頁尾。嵌套的FlexLayout具有水平主軸，三個子元素水平排列成一行。

搭配 .NET MAUI FlexLayout 的聖杯版面設計。

在此範例中， Order 屬性在第一 BoxView 列被設定為小於其兄弟項目的值，使其成為列中的第一項。 Basis該屬性在兩個BoxView物件上都設定為寬度為 50 個裝置無關單元。 Grow屬性設置於內嵌的FlexLayout中，以表示該FlexLayout應佔據外層FlexLayout中所有未被占用的垂直空間。此外，屬性 Grow 設定在表示內容的上 Label ，表示該內容將佔據巢狀 FlexLayout中所有未使用的水平空間。

備註

還有一個 Shrink 特性，當子節點的大小超過子節點大小 FlexLayout 時可以使用，但不希望包裹。

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-04-10

FlexLayout (彈性佈局)

方向與對齊

方向

包裝

正當化內容

對齊元素

AlignContent（對齊內容）

兒童對齊與尺寸

對齊自我

訂單

依據

成長

縮小

Examples

Stack

包裝物品

頁面配置

意見反應

其他資源