In Xamarin.Forms ,FlexLayout and is enabled with xamarin version 3.0 and above. It is also known as flex layout or flex-box, because it includes many flexible options to arrange children within the layout.

FlexLayout is similar to the Xamarin.Forms StackLayout in that it can arrange its children horizontally and vertically in a stack. However, the FlexLayout is also capable of wrapping many childrens and it has many options for orientation, alignment, and adapting to various screen sizes.
This tutorial is based on Using flex layout.

We are using  xmlns:ios=“……………..   ios:Page.UseSafeArea=“true” code so that our layout will be adaptive to every screen sizes.
At first we are going to define <Style for “Frame,Label and image  “> so that we are going to call all those styles in upcoming code. It’s a good precise for localization.
Then we are going to set  <ScrollView Orientation=”Both”> So that our scrollview will have horizontal scrolling. Now next part is to Add frame of width and height to some value inside flexlayout . Inside which we are going to give   <FlexLayout Direction=”Column”> and add the contents inside it. That’s all please show up the code 🙂

Step 1 :
Your MainPage.xaml will beLike this:

Step2: We are going to initialize the MainPage to start as a start up page inside App.xaml.cs.

And We are going to define styles for our label inside App.Xaml so that we could use all the properties. This is one way of Localization of resoureces. This label property will be used by labels globally.  Your App.xaml will look like this.