Getting started with FlexLayout Properties Behavior

In Xamarin Forms we have some layouts that define the distribution scheme to the components in the screen. Handling with this, the views for the user.

In this case I am going to explain about FlexLayout.

What is?

FlexLayout provides different ways for allocating components in the screen, making alignment, design and spaces organization way easier. This layout have the power to give a better proportional size for the components inside, because it arrange elements in a ratio based in screen dimensions and among elements in the screen. Keeping your view cleaner and more organized.

To use it, you just have to get Nightly version from Xamarin Forms.

Let’s Start!

FlexLayout have some properties to define the behavior of the components, let’s see:

JustifyContent:

This property define how will be organize the content.

Supported values. Organize your elements as follows:

Start: At begin of the container. (Default value).
Center: Center of the container.
End: End of the container.
SpaceAround: Begins with one unit of space for the borders and two units respect to others elements in the container.
SpaceBetween: Gets same space between them.
SpaceEvenly: Gets same spaces between borders and the other elements in the container.

AlignItems:

Defines elements behavior alignment in the container.

Supported values. Organize your elements as follows:

Start: Your elements at begin of the container just getting a line space.
Center: Puts elements in the center of the container.
End: Elements at the end of the container.
Stretch: Your elements at begin of the container in a horizontal stretched. (Default value)