如何使用FlexLayout和CSS在行中放置内容

Question

我正在使用Xamarin.FlexLayout和CSS设计登录屏幕

最终设计应如下图所示：

我当前的XAML代码：

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

    <ContentPage.Resources>
        <StyleSheet Source="/Assets/Styles/App.css" />
    </ContentPage.Resources>

    <FlexLayout Direction="Column" AlignItems="Center" JustifyContent="SpaceBetween">

        <!-- Header -->
        <FlexLayout x:Name="FlexLayoutHeader" Direction="Row" AlignItems="Center" JustifyContent="Center">
            <Label Text="ola" FlexLayout.Basis="10%" />
            <Label x:Name="LblTitle" Text="" />
        </FlexLayout>

        <!-- Content -->
        <Entry x:Name="EntryEmail" Placeholder="" HorizontalOptions="Start" />

        <Entry x:Name="EntryPassword" IsPassword="true" Placeholder="" HorizontalOptions="Start"  />

        <Button x:Name="BtnLogIn" Text="" Command="{Binding LogInCommand}" />

        <Label x:Name="LblForgotPassword" Text="">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding ForgotPasswordCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>

        <Label x:Name="LblSignUp" Text="">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding SignUpCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>

        <!-- Footer -->
        <FlexLayout x:Name="FlexLayoutFooter" Direction="Column" AlignItems="Center" JustifyContent="SpaceEvenly">
            <Label x:Name="LblFooter" Text="" />
        </FlexLayout>

    </FlexLayout>

</ContentPage>

当然，我当前的XAML与最终设计相差很远，但是我不知道如何在FlexLayout中进行放置。

感谢您的帮助