[C#/MAUI/.NET6] FlexLayout 엘리먼트 : JustifyContent 속성을 사용해 기본 축을 따라 자식 사이 및 주위 공간 배분하기

TestProject.zip

0.15MB

▶ 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">
    <ScrollView
        Margin="10"
        Orientation="Vertical">
        <StackLayout Spacing="10">
            <Label
                HorizontalOptions="Start"
                Text="JustifyContent 속성 : Start" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="Start">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : Center" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="Center">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : End" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="End">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceAround" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="SpaceAround">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceBetween" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="SpaceBetween">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceEvenly" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="SpaceEvenly">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
        </StackLayout>
    </ScrollView>
</ContentPage>