[C#/MAUI/.NET6] FlexLayout 엘리먼트 : AlignSelf 첨부 속성을 사용해 교차 축을 따라 특정 자식에 대한 자식 사이와 주위 공간 배분하기

■ FlexLayout 엘리먼트의 AlignSelf 첨부 속성을 사용해 교차 축을 따라 특정 자식에 대한 자식 사이와 주위 공간을 배분하는 방법을 보여준다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Frame
        Margin="10"
        CornerRadius="0"
        BorderColor="Black"
        Padding="2,2,2,2">
        <FlexLayout
            Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
            <BoxView
                FlexLayout.AlignSelf="Start"
                WidthRequest="100"
                HeightRequest="100"
                Color="Red" />
            <BoxView
                FlexLayout.AlignSelf="Center"
                WidthRequest="100"
                HeightRequest="100"
                Color="Green" />
            <BoxView
                FlexLayout.AlignSelf="End"
                WidthRequest="100"
                HeightRequest="100"
                Color="Blue" />
            <BoxView
                FlexLayout.AlignSelf="Stretch"
                WidthRequest="100"
                HeightRequest="100"
                Color="Magenta" />
        </FlexLayout>
    </Frame>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Frame

Margin="10"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="SpaceEvenly">

<BoxView

FlexLayout.AlignSelf="Start"

WidthRequest="100"

HeightRequest="100"

Color="Red" />

<BoxView

FlexLayout.AlignSelf="Center"

WidthRequest="100"

HeightRequest="100"

Color="Green" />

<BoxView

FlexLayout.AlignSelf="End"

WidthRequest="100"

HeightRequest="100"

Color="Blue" />

<BoxView

FlexLayout.AlignSelf="Stretch"

WidthRequest="100"

HeightRequest="100"

Color="Magenta" />

</FlexLayout>

</Frame>

</ContentPage>

TestProject.zip