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

user_2927635 0
Viewed 1321

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

xamarin.forms xamarin forms
2 Answers

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

user_77189240

You need to change you flexlayout to this:

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

sample

user_137941800
Related