Xamarin.Forms FlexLayout

Flexlayout is new in Xamarin.Forms 3.0. It’s based on Flexlayout features in CSS we’ve been using for a long time.

It looks like more complicated than stacklayout and grid at first look but when we start to use flexlayout with css we will see how easy to align and manage your elements.

When we look at FlexLayout properties, we can see what we need to use.

AlignItems, AlignContent, JustifyContent, Direction, Wrap and Position properties are really easy to use for FlexLayout. They are all already used with an enum.

We just need to know what property and enum value we should use for alignment and orientation in our mind.

AlignItems: Align objects via FlexAlignItems

<FlexLayout AlignItems="Start|Center|End|Stretch" StyleClass="header">
<Label Text="Label 1" />
<Label Text="Label 2" />
<Label Text="Label 3" />
</FlexLayout>
Start Center End Stretch

Direction: Align objects by row, column or reverse via FlexDirection.

<FlexLayout Direction="Column|ColumnReverse|Row|RowReverse" StyleClass="header">
<Label Text="Label 1" />
<Label Text="Label 2" />
<Label Text="Label 3" />
</FlexLayout>
Column ColumnReverse Row RowReverse

JustifyContent: Provides structural alignment of objects

<FlexLayout JustifyContent="Start|Center|End|SpaceBetween|SpaceAround|SpaceEvenly" StyleClass="header">
<Label Text="Label 1" />
<Label Text="Label 2" />
<Label Text="Label 3" />
</FlexLayout>
Start Center End
SpaceBetween SpaceAround SpaceEvenly

Wrap: Wrap, NoWrap (default) or Reverse your views in FlexLayout Child items.

<FlexLayout Wrap="Wrap|NoWrap|Reverse" StyleClass="header">
<Label Text="Label 1" />
<Label Text="Label 2" />
<Label Text="Label 3" />
<Label Text="Label 4" />
<Label Text="Label 5" />
<Label Text="Label 6" />
<Label Text="Label 7" />
</FlexLayout>
Wrap NoWrap Reverse

AlignSelf: Align child element.

<FlexLayout StyleClass="header">
<Label Text="Label 1" FlexLayout.AlignSelf="Start" />
<Label Text="Label 2" FlexLayout.AlignSelf="Center" />
<Label Text="Label 3" FlexLayout.AlignSelf="End" />
<Label Text="Label 4" FlexLayout.AlignSelf="Auto" />
<Label Text="Label 5" FlexLayout.AlignSelf="Stretch" />
</FlexLayout>

Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

Post A Reply