Выравнивание элементов. JustifyContent

Свойство JustifyContent управляет выравниванием элементов внутри строк и столбцов. Оно принимает одно из значений из перечисления FlexJustify:

• Start: элементы начинаются с начала строки или столбца. Значение по умолчанию

• End: элементы начинаются с конца строки или столбца.

• Center: элементы позиционируются по центру строки или столбца

• SpaceAround: устанавливает равномерные отступы между элементами

• SpaceBetween: устанавливает равномерные отступы между элементами, при этом первый и последний элементы прижимают к границам контейнера

• SpaceEvenly: устанавливает равномерные отступы между элементами и границами контейнера

Start и End

По умолчанию это свойство имеет значение Start. То есть элементы прижимаются к началу строки или столбца. Значение End позволяет прижать элементы в концу строку или столбца.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutApp.MainPage">
    <ContentPage.Resources>
        <Style  x:Key="btnStyle" TargetType="Button">
            <Setter Property="WidthRequest" Value="120" />
            <Setter Property="HeightRequest" Value="100" />
        </Style>
    </ContentPage.Resources>
    <FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="End">
        <Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
        <Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
    </FlexLayout>
</ContentPage>

Center

Значение Center выравниваниет элементы по центру строки или столбца:

<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="Center">
	<Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
</FlexLayout>

SpaceAround

SpaceAround создает равномерные отступы между элементами

<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceAround">
	<Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
</FlexLayout>

SpaceBetween

Значение SpaceBetween устанавливает равномерные отступы между элементами, но в отличие от SpaceAround элементы прижимаются к началу и концу строки или столбца:

<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceBetween">
	<Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
</FlexLayout>

SpaceEvenly

SpaceEvenly устанавливает равномерные отступы между элементами и границами контейнера:

<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
	<Button BackgroundColor="SeaGreen" Text="Item 1" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightBlue" Text="Item 2" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightPink" Text="Item 3" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightGreen" Text="Item 4" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCoral" Text="Item 5" Style="{StaticResource Key=btnStyle}" />
	<Button BackgroundColor="LightCyan" Text="Item 6" Style="{StaticResource Key=btnStyle}" />
</FlexLayout>