How to reduce space between content in Flex layout, if content is placed in row direction?

My questions are:

  1. How to reduce space between two rows?
  2. How to reduce space between items, if number of items are less than privous row items?

My xaml code:

 <FlexLayout Wrap="Wrap" AlignItems="Start" Direction="Row" JustifyContent="SpaceAround"  HorizontalOptions="StartAndExpand">
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
    <Image  Source="icon.png"/>
</FlexLayout>

Output:
enter image description here

What I want is:
enter image description here

1 answer

  • answered 2018-07-12 07:09 uprightbassfan78

    I've never used FlexLayout in Xamarin, but from my HTML/CSS days I would suggest that your issue is with JustifyContent="SpaceAround". Try to change SpaceAround to FlexStart