Flex Layout

FlexLayout is a flexible box layout that provides a more efficient way to layout, align, and distribute space among items in the container, even when their size is unknown or dynamic.

A layout provides features such as wrapping that automatically positions items that do not fit on an axis to another row or column.

FlexLayout defines four properties that affect the size, orientation, and alignment of child views. The properties are defined as follows:

You can scroll this table.
Property Type Description
Direction FlexDirection Orientation of the flex items are laid out in columns or rows.
Justification FlexJustification Alignment of items along the flex axis when free space is available.
Alignment AlignmentType Alignment of items along the cross axis when free space is available.
WrapType FlexWrapType Enable wrapping of items.

Natural size of items are used, which can be different for each item. Additionally, setting the size of an item has no effect.

Justification applies to the flex Direction axis while Alignment applies to the cross axis. If you change the flex Direction axis, then the base of the Justification axis will also change.

FlexDirection

Direction property specifies the main axis direction along which the flex items are placed.

FlexDirection

You can scroll this table.
Property value Description
Row Place items horizontally in a row.
RowReverse Place items horizontally in a row, but in reverse order.
Column Place items vertically in a column.
ColumnReverse Place items vertically in a column, but in reverse order.

The following code shows how to set the Direction property using FlexDirection:


                
C#

                

                    
Copy

                    

                

            
View layoutView = new View();
var flexLayout = new FlexLayout();
flexLayout.Direction = FlexLayout.FlexDirection.Column;
layoutView.Layout = flexLayout;
You can scroll this table.
 

                
xml

                

                    
Copy

                    

                

            
<View>
    <View.Layout>
        <FlexLayout Direction="Column" />
    </View.Layout>
</View>
You can scroll this table.

FlexJustification

Justification property specifies the alignment for flex items, when they do not use all available space on the main axis.

FlexJustification

You can scroll this table.
Property value Description
FlexStart Position items at the beginning of the container.
FlexEnd Position items at the end of the container.
Center Position items at the center of the container.
SpaceBetween Position items with equal spacing between them.
SpaceAround Position items with equal spacing before, between, and after them.

The following code shows how to set the Justification property using FlexJustification:


                
C#

                

                    
Copy

                    

                

            
View layoutView = new View();
var flexLayout = new FlexLayout();
flexLayout.Justification = FlexLayout.FlexJustification.SpaceBetween;
layoutView.Layout = flexLayout;
You can scroll this table.
 

                
xml

                

                    
Copy

                    

                

            
<View>
    <View.Layout>
        <FlexLayout Justification="SpaceBetween"/>
    </View.Layout>
</View>
You can scroll this table.

AlignmentType

Alignment property specifies the alignment for flex items when they do not use all the available space on the cross axis.

AlignmentType

You can scroll this table.
Property value Description
Auto Inherit the same alignment from the parent.
FlexStart Align items to the beginning of the container.
FlexEnd Align items to the end of the container.
Center Align items to the center of the container.
Stretch Stretch items to fit the container.

The following code shows how to set the Alignment property using AlignmentType:


                
C#

                

                    
Copy

                    

                

            
View layoutView = new View();
var flexLayout = new FlexLayout();
flexLayout.Alignment = FlexLayout.AlignmentType.Center;
layoutView.Layout = flexLayout;
You can scroll this table.
 

                
xml

                

                    
Copy

                    

                

            
<View>
    <View.Layout>
        <FlexLayout Alignment="Center"/>
    </View.Layout>
</View>
You can scroll this table.

FlexWrapType

WrapType property specifies whether the flex items must wrap if there is not enough room for them on one flex line.

FlexWrapType

You can scroll this table.
Property value Description
NoWrap Reduce item sizes to fit them in a single line along the main axis.
Wrap Show items over multiple lines, if needed.

The following code shows how to set the WrapType property using FlexWrapType:


                
C#

                

                    
Copy

                    

                

            
View layoutView = new View();
var flexLayout = new FlexLayout();
flexLayout.WrapType = FlexLayout.FlexWrapType.NoWrap;
layoutView.Layout = flexLayout;
You can scroll this table.
 

                
xml

                

                    
Copy

                    

                

            
<View>
    <View.Layout>
        <FlexLayout WrapType="NoWrap"/>
    </View.Layout>
</View>
You can scroll this table.

Attached properties

The following properties affect the specified child view areas:

  • FlexAlignmentSelf
  • FlexPositionType
  • FlexAspectRatio
  • FlexBasis
  • FlexShrink
  • FlexGrow
Note

The FlexAlignmentSelf, FlexPositionType, FlexAspectRatio, FlexBasis, FlexShrink, and FlexGrow properties are added in Tizen 6.0.

Table: Properties and descriptions

You can scroll this table.
Property Type Description
FlexAlignmentSelf AlignmentType The alignment of the item along the cross axis when free space is available.
FlexPositionType PositionType The position type defines how the item is positioned within its parent.
FlexAspectRatio float The ratio between the width and the height of an item.
FlexBasis float Specifies item’s default size before FlexGrow and FlexShrink calculations are performed.
FlexShrink float Specifies how to shrink children along the main axis in case the total size of the children overflows the size of the flex layout on the main axis.
FlexGrow float Specifies how the space within a flex layout is distributed among its children along the main axis.

FlexAlignmentSelf property

The FlexAlignmentSelf property has the same options and effect as the Alignment property, but instead of affecting the children within a flex layout, this property is applied to a single child to change its alignment within its parent. The FlexAlignmentSelf property overrides any option set by the parent with the Alignment property.

The following figure shows how to use the FlexAlignmentSelf property:

FlexAlignmentSelf

FlexPositionType property

The FlexPositionType property of an element defines how it is positioned within its parent. By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and its movement depends on the margin. The offset does not affect the position of any sibling or parent elements. When positioned absolutely, an element doesn’t take part in the normal layout flow. It is instead laid out independently of its siblings.

The following figure shows how to use the FlexPositionType property:

FlexPositionType

FlexAspectRatio property

The FlexAspectRatio property is defined as the ratio between the width and the height of a node, for example, if a node has an aspect ratio of 2, then its width is twice the size of its height.

The FlexAspectRatio property has the following characteristics:

  • Accepts any floating-point value greater than 0. The default value is undefined.
  • Has a higher priority than FlexGrow property.
  • If aspect ratio, width, and height are set, then the cross axis dimension is overridden.

FlexBasis property

The FlexBasis property is an axis-independent way of providing the default size of an item along the main axis:

  • If FlexDirection of flex layout is Row, the FlexBasis property of a child is similar to width of the child.
  • If FlexDirection of flex layout is Column, the FlexBasis property of a child is similar to height of the child.

The FlexBasis property specifies the default size of the child, but the child-size can also be changed with the FlexGrow and the FlexShrink property.

FlexShrink property

The FlexShrink describes how to shrink children along the main axis in case the total size of the children overflows the size of the flex layout on the main axis. The FlexShrink property accepts any floating-point value greater or equal to 0. The default value is 1.

The following figure shows how to use the FlexShrink property:

FlexShrink

FlexGrow property

The FlexGrow property specifies how the space within a flex layout is distributed among its children along the main axis. After laying out its children, a flex layout distributes any remaining space according to the FlexGrow property values specified by its children. The FlexGrow property accepts any floating-point value greater or equal to 0. The default value is 0.

The following figure shows how to use the FlexGrow property:

FlexGrow

Grid Layout
Next Relative Layout
Submit your feedback to GitHub