FlexLayout XamarinForms

Step 1 :
Your MainPage.xaml will beLike this:

	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:newflex" x:Class="newflex.MainPage"
	xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
	ios:Page.UseSafeArea="true" >
	<ContentPage.Resources>
	<Style TargetType="Frame">
	<Setter Property="BackgroundColor" Value="#fdfdfd" />
	<Setter Property="BorderColor" Value="#e5e5e5" />
	<Setter Property="Margin" Value="10" />
	<Setter Property="CornerRadius" Value="15" />
	</Style>
	<Style TargetType="Label">
	<Setter Property="Margin" Value="0, 5" />
	</Style>
	<Style x:Key="headerLabel" TargetType="Label">
	<Setter Property="Margin" Value="0, 8" />
	<Setter Property="FontSize" Value="Large" />
	<Setter Property="TextColor" Value="Blue" />
	</Style>
	<Style TargetType="Image">
	<Setter Property="FlexLayout.Order" Value="-1" />
	<Setter Property="FlexLayout.AlignSelf" Value="Center" />
	</Style>
	<Style TargetType="Button">
	<Setter Property="Text" Value="MoreInfo" />
	<Setter Property="FontSize" Value="Small" />
	<Setter Property="TextColor" Value="White" />
	<Setter Property="BackgroundColor" Value="#4c90ee" />
	<Setter Property="BorderRadius" Value="30" />
	</Style>
	</ContentPage.Resources>
	<ScrollView Orientation="Both">
	<FlexLayout>
	<Frame WidthRequest="300"
	HeightRequest="550">
	<FlexLayout Direction="Column">
	<Label Text="France national football team"
	Style="{StaticResource headerLabel}" />
	<Label Text="Nickname(s)" />
	<Label Text=" &#x2022; Les Bleus (The Blues)" />
	<Image Source="https://upload.wikimedia.org/wikipedia/en/thumb/a/a3/Equipe_de_France_de_football_Logo.png/240px-Equipe_de_France_de_football_Logo.png"
	WidthRequest="240"
	HeightRequest="180" />
	<Label FlexLayout.Grow="1" />
	<Grid Grid.Row="1" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<StackLayout>
	<StackLayout.Children>
	<Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="103" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />
	</StackLayout>
	<StackLayout Grid.Column="1">
	<StackLayout.Children>
	<Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="164" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />
	</StackLayout>
	<StackLayout Grid.Column="2">
	<StackLayout.Children>
	<Image Source="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="107" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
	</StackLayout>
	</Grid>
	<Button/>
	</FlexLayout>
	</Frame>
	<Frame WidthRequest="300"
	HeightRequest="550">
	<FlexLayout Direction="Column">
	<Label Text="Belgium national football team "
	Style="{StaticResource headerLabel}" />
	<Label Text="Nickname(s)" />
	<Label Text=" &#x2022; De Rode Duivels Les Diables Rouges Die Roten Teufel(The Red Devils)" />
	<Image Source="https://s.s-bol.com/imgbase0/imagebase3/large/FC/1/5/5/8/9200000076228551.jpg"
	WidthRequest="240"
	HeightRequest="180" />
	<Label FlexLayout.Grow="1" />
	<Grid Grid.Row="1" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<StackLayout>
	<StackLayout.Children>
	<Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="103" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />
	</StackLayout>
	<StackLayout Grid.Column="1">
	<StackLayout.Children>
	<Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="164" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />
	</StackLayout>
	<StackLayout Grid.Column="2">
	<StackLayout.Children>
	<Image Source="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="107" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
	</StackLayout>
	</Grid>
	<Button />
	</FlexLayout>
	</Frame>
	<Frame WidthRequest="300"
	HeightRequest="550">
	<FlexLayout Direction="Column">
	<Label Text="Brazil national football team"
	Style="{StaticResource headerLabel}" />
	<Label Text="Nickname(s)" />
	<Label Text=" &#x2022; Seleção (The National Team)" />
	<Image Source="https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/1280px-Flag_of_Brazil.svg.png"
	WidthRequest="180"
	HeightRequest="180" />
	<Label FlexLayout.Grow="1" />
	<Grid Grid.Row="1" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<StackLayout>
	<StackLayout.Children>
	<Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="103" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />
	</StackLayout>
	<StackLayout Grid.Column="1">
	<StackLayout.Children>
	<Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="164" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />
	</StackLayout>
	<StackLayout Grid.Column="2">
	<StackLayout.Children>
	<Image Source="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="107" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
	</StackLayout>
	</Grid>
	<Button />
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</ScrollView>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Step2:
Your App.xaml will look like this:

	<?xml version="1.0" encoding="utf-8"?>
	<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="flex.App">
	<Application.Resources>
	<!-- This are the Application resource dictionary -->
	<ResourceDictionary>
	<!-- colors -->
	<Color x:Key="HeaderTextColor">#555555</Color> <!--Davy grey-->
	<Color x:Key="BodyTextColor">#bababa</Color> <!--Lightgray-->
	<!-- Customized font -->
	<OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String">
	<On Platform="iOS">HelveticaNeue</On>
	<On Platform="Android">sans-serif</On>
	</OnPlatform>
	<OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String">
	<On Platform="iOS">HelveticaNeue-Light</On>
	<On Platform="Android">sans-serif-light</On>
	</OnPlatform>
	<OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String">
	<On Platform="iOS">HelveticaNeue-Medium</On>
	<On Platform="Android">sans-serif-medium</On>
	</OnPlatform>
	<!-- font sizes -->
	<x:Double x:Key="TitleFont">20</x:Double>
	<x:Double x:Key="BodyFont">18</x:Double>
	<x:Double x:Key="TagTextFont">18</x:Double>
	<x:Double x:Key="StatsNumberFont">20</x:Double>
	<x:Double x:Key="StatsCaptionFont">16</x:Double>
	<!-- styles -->
	<Style x:Key="ProfileNameLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" /> <!--Davy grey-->
	<Setter Property="FontFamily" Value="{StaticResource MediumFontFamily}" /> <!--Medium In Size-->
	<Setter Property="FontSize" Value="{StaticResource TitleFont}" /> <!--20-->
	</Style>
	<Style x:Key="ProfileTagLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" /> <!--Lightgray-->
	<Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" /> <!--Regular-->
	<Setter Property="FontSize" Value="{StaticResource TagTextFont}" /> <!--18-->
	</Style>
	<Style x:Key="StatsNumberLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" /> <!--Davy grey-->
	<Setter Property="HorizontalTextAlignment" Value="Center" />
	<Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" /> <!--light-->
	<Setter Property="FontSize" Value="{StaticResource StatsNumberFont}" /> <!--20-->
	</Style>
	<Style x:Key="StatsCaptionLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" /> <!--Lightgray-->
	<Setter Property="Margin" Value="0,-5,0,0" />
	<Setter Property="HorizontalTextAlignment" Value="Center" />
	<Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" /> <!--Light-->
	<Setter Property="FontSize" Value="{StaticResource StatsCaptionFont}" /> <!--16-->
	</Style>
	</ResourceDictionary>
	</Application.Resources>
	</Application>

view raw App.xaml hosted with ❤ by GitHub