'How to align items from start in a Flex Layout of xamarin forms?

I am using xamarin forms V3.3.0. I am not able to align items in the last row of a flex layout from start. I tried with these property combination, Direction="Row" Wrap="Wrap" JustifyContent="Center" AlignContent="Start" AlignItems="Start". Added code and image below.

<FlexLayout Direction="Row"  Wrap="Wrap" Margin="5" JustifyContent="Center"  AlignContent="Start"  AlignItems="Start">
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>
            <BoxView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" Margin="5"></BoxView>            
        </FlexLayout>

see the image here

formsxamarinxamarin.forms


Solution 1:[1]

For these item on the last line, the JustifyContent="Center" is all the items are moved to the center.

You could try using JustifyContent="Start" instead:

enter image description here

Solution 2:[2]

You need to change you flexlayout to this:

<FlexLayout WidthRequest="330" HorizontalOptions="Center"  Wrap="Wrap" Margin="5">

sample

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 York Shen
Solution 2 Jeremy Caney

Related Questions