FlexLayout

Using Flex Layout, you can stack and wrap child views. It works very similar to the concept you might know from CSS as the Flexible Box Layout (or flex layout or flex box).

The FlexLayout is related to the StackLayout you might already know from working with Xamarin.Forms. The big advantage of the FlexLayout is that it will wrap its children where needed. When there is no more space in the row or column where the children are defined, it will move the rest of the items to the next row/column.

A FlexLayout is very easy to define, as you can see in the code block underneath.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              xmlns:local="clr-namespace:FlexLayoutDemos"              x:Class="FlexLayoutDemos.SimpleStackPage"              Title="Simple Stack">     <FlexLayout Direction="Column" AlignItems="Center"                 JustifyContent="SpaceEvenly">         <!—Your controls here -->     </FlexLayout> </ContentPage>

Define it as any other regular layout element you are used to. With the properties you set on the FlexLayout , you can determine how to layout the children and how they should align and wrap.

If we want to place children horizontally or vertically then we can use FlexLayout. It is similar to StackLayout.

example : Place items horizontally

<FlexLayout Direction="Row"

AlignItems="Center"

JustifyContent="SpaceEvenly">

<Label Text="FlexLayout Demo" FontSize="Large" />

<Button Text="My Button" />

<Label Text="Hello World" />

</FlexLayout>

Place items vertically

 <FlexLayout Direction="Column"

 AlignItems="Center"

 JustifyContent="SpaceEvenly">

 <Label Text="FlexLayout Demo" FontSize="Large" />

 <Button Text="My Button" />

 <Label Text="Hello World" />

 </FlexLayout>

Microsoft DOC Link