Alignment of FlexLayout element and its contents

Question

In a Maui project I have 3 FlexLayout items that contain 1 CheckBox and 1 Label each.

2 of them are long enough to cause their content to wrap.

When wrapping occurs the margins of the FlexLayout and its content change.

1. How can I keep the distance from the left side of the screen of the 2 CheckBoxes with the Labels with the wrapped text same as the first one?
2. How can I keep the gap between the CheckBoxes and the Labels with the wrapped text same as the gap of the first one?

edit:

Here is my code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="FlexMargins.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="FlexLayout Margins Test"
    Padding="10,10,10,10"
    BackgroundColor="AliceBlue">

    <StackLayout>

        <Label
            FontAttributes="Bold"
            FontSize="20"
            Text="Title Label" />

        <FlexLayout JustifyContent="SpaceBetween">
            <CheckBox x:Name="FirstCheckBox" />
            <Label Text="First Label" VerticalOptions="Center">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TappedFirstLabel" />
                </Label.GestureRecognizers>
                <Label.Triggers>
                    <DataTrigger
                        Binding="{Binding Source={x:Reference FirstCheckBox}, Path=IsChecked}"
                        TargetType="Label"
                        Value="true">
                        <Setter Property="FontAttributes" Value="Bold" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>
        </FlexLayout>
        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />


        <FlexLayout JustifyContent="SpaceBetween">
            <CheckBox x:Name="SecondCheckBox" />
            <Label Text="Second Label with very long text that is going to wrap at the end of the screen" VerticalOptions="Center">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TappedSecondLabel" />
                </Label.GestureRecognizers>
                <Label.Triggers>
                    <DataTrigger
                        Binding="{Binding Source={x:Reference SecondCheckBox}, Path=IsChecked}"
                        TargetType="Label"
                        Value="true">
                        <Setter Property="FontAttributes" Value="Bold" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>
        </FlexLayout>
        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />


        <FlexLayout JustifyContent="SpaceBetween">
            <CheckBox x:Name="ThirdCheckBox" />
            <Label Text="Third Label with very long text that is going to wrap at the end of the screen" VerticalOptions="Center">
                <Label.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TappedThirdLabel" />
                </Label.GestureRecognizers>
                <Label.Triggers>
                    <DataTrigger
                        Binding="{Binding Source={x:Reference ThirdCheckBox}, Path=IsChecked}"
                        TargetType="Label"
                        Value="true">
                        <Setter Property="FontAttributes" Value="Bold" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>
        </FlexLayout>
        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
    </StackLayout>

</ContentPage>

Answer 1

Since you know you have exactly two components (CheckBox and Label) it is overkill to use FlexLayout. Also, the problem you're experience can probably be attributed to some Label geometry not being propagated correctly leading to it, occasionally, colliding with the CheckBox.

The easiest solution is to swap out the FlexLayout for a Grid, i.e.

    <StackLayout>

        <Label FontAttributes="Bold" FontSize="20" Text="Title Label" />

        <Grid ColumnDefinitions="40,*">
            <CheckBox x:Name="FirstCheckBox" />
            <Label Grid.Column="1" Text="First Label" VerticalOptions="Center" />
        </Grid>

        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />

        <Grid ColumnDefinitions="40,*">
            <CheckBox x:Name="SecondCheckBox" />
            <Label Grid.Column="1" Text="Second Label with very long text that is going to wrap at the end of the screen" VerticalOptions="Center" />
        </Grid>

        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />

        <Grid ColumnDefinitions="40,*">
            <CheckBox x:Name="ThirdCheckBox" />
            <Label Grid.Column="1" Text="Third Label with very long text that is going to wrap at the end of the screen" VerticalOptions="Center" />
        </Grid>

        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
    </StackLayout>